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

Thumbnail
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 Codepen.io
Copyright moaz123 ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

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

  
</head>

<body>

  <!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d -->

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

</body>

</html>

/*Downloaded from https://www.codeseek.co/moaz123/rotating-on-the-x-axis-aBbPYN */
p { 
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed{
  transform: rotate3d(0,1,0,30deg);
  background-color: orange;
}

Comments