CSS3的3D旋转动画效果

2022-12-07 10:43:29
857次极悦

通过 CSS transform 属性，您可以使用以下 3D 转换方法：

rotateX()

rotateY()

rotateZ()

rotateX() 方法

#myDiv { 
  变换：旋转X （150度）；
}

rotateY() 方法

#myDiv { 
  变换：旋转Y （150度）；
}

rotateZ() 方法

#myDiv { 
  变换：旋转Z （150度）；
}

首先我们需要创建两个文件 index.html 和 style.css 然后我们需要为它做代码。

第1步

在 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 https-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>

第2步

然后我们需要为 style.css添加代码，我在下面的屏幕中提供了这些代码。

* {
    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;
}

上一篇：10个实现JavaScript网页特效的工具下一篇：HTML页面布局技术