DEV Community

Cover image for CSS 3D Rotation Animation Effects
Stackfindover
Stackfindover

Posted on • Updated on

CSS 3D Rotation Animation Effects

Hello guys in this tutorial, we are going to learn how to add 3D rotation animation effects using html and css.
CSS 3D Transforms Methods
With the CSS transform property you can use the following 3D transformation methods:

  • rotateX()
  • rotateY()
  • rotateZ()
The rotateX() Method
#myDiv {
  transform: rotateX(150deg);
}
Enter fullscreen mode Exit fullscreen mode
The rotateY() Method
#myDiv {
  transform: rotateY(150deg);
}
Enter fullscreen mode Exit fullscreen mode
The rotateZ() Method
#myDiv {
  transform: rotateZ(150deg);
}
Enter fullscreen mode Exit fullscreen mode

First we need to create two files index.html and style.css then we need to do code for it.

3D Rotation Animation Effects Step:1

Add below code inside index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>How to make 3D Rotating Image in CSS ?</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="box">
      <span style="--i:1"> <img src="01.jpg"> </span>
      <span style="--i:2"> <img src="02.jpg"> </span>
      <span style="--i:3"> <img src="03.jpg"> </span>
      <span style="--i:4"> <img src="04.jpg"> </span>
      <span style="--i:5"> <img src="05.jpg"> </span>
      <span style="--i:6"> <img src="06.jpg"> </span>
      <span style="--i:7"> <img src="07.jpg"> </span>
      <span style="--i:8"> <img src="08.jpg"> </span>
      <span style="--i:9"> <img src="09.jpg"> </span>
    </div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

3D Rotation Animation Effects Step:2

Then we need to add code for style.css which code i provide in below screen.

* {
    padding: 0;
    margin: 0;
    font-family: 'IBM Plex Sans', sans-serif;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: #000;
}
.box {
    position: relative;
    width: 300px;
    height: 150px;
    transform-style: preserve-3d;
    animation: animate 30s linear;
}
@keyframes animate {
    0% {
        transform: perspective(1000px) rotateY(0deg);
    }
    100% {
        transform: perspective(1000px) rotateY(360deg);
    }
}
.box > span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: center;
    transform-style: preserve-3d;
    transform: rotateY(calc(var(--i) * 45deg)) translateZ(400px);
    -webkit-box-reflect: below 0px linear-gradient(transparent, transparent, #0000001a);
}
.box > span > img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: contain;
}
Enter fullscreen mode Exit fullscreen mode

3D Rotation Animation Effects Video output:

3D Rotation Animation Effects Codepen output:

For more interesting content

Visit for more!

Top comments (0)