Languages
[Edit]
EN

CSS - 3D rotation

0 points
Created by:
Maison-Humphries
371

In this article, we would like to show you 3D rotation in CSS.

Quick solution:

Note:

The solutions below are detailed in the articles from the Quick solution section above.

 

Rotate around X-axis - rotateX()

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    div {
      height: 75px;
      width: 75px;
      font-size: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: 2s;
    }

    div:hover {
      transform: rotateX(180deg);
    }

  </style>
</head>
<body>
  <div>❤️</div>
</body>
</html>

Rotate around Y-axis - rotateY()

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    div {
      height: 75px;
      width: 75px;
      font-size: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: 2s;
    }

    div:hover {
      transform: rotateY(180deg);
    }

  </style>
</head>
<body>
  <div>❤️</div>
</body>
</html>

Rotate around Z-axis - rotateZ()

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    div {
      height: 75px;
      width: 75px;
      font-size: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: 2s;
    }

    div:hover {
      transform: rotateZ(180deg);  /* transform: rotate(180deg);*/
    }

  </style>
</head>
<body>
  <div>❤️</div>
</body>
</html>

Note:

You can use rotate() method instead of rotateZ() - these two solutions are equal.

References

  1. CSS - rotate element horizontally on hover (rotateX)

  2. CSS - rotate element vertically on hover (rotateY)

  3. CSS - rotate element on hover (rotateZ)

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join