Rotating on the X-axis

In this example below you will see how to do a Rotating on the X-axis with some HTML / CSS and Javascript

This awesome code was written by moaz123, you can see more from this user in the personal repository.
You can find the original code on
Copyright moaz123 ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>Rotating on the X-axis</title>
      <link rel="stylesheet" href="css/style.css">



  <!-- Learn about this code on MDN: -->

<p class="transformed">bar</p>



/*Downloaded from */
p { 
  width: 50px;
  height: 50px;
  background-color: teal;

  transform: rotate3d(0,1,0,30deg);
  background-color: orange;