目录
一、目标效果
二、预备知识
1.坐标轴
想要实现3D旋转立方体的效果就必须用到了解网页中的坐标轴是怎样的，然后根据坐标轴来旋转图片。与我们平常所见的坐标轴不同，浏览器中的x轴是从左到右的、y轴是从上到下的、z轴是从后到前的。
我们可以通过一些方法来控制图片在坐标轴上面移动。
| 方法 | 功能 |
|---|---|
| translateX(x) | 沿着 X 轴移动元素。 |
| translateY(y) | 沿着 Y 轴移动元素。 |
| translateZ(z) | 沿着 Z 轴移动元素。 |
| translate(x,y) | 沿着 X 和 Y 轴移动元素。 |
| translate3d(x,y,z) | 分别定义沿着三个轴移动的距离 |
2.旋转动画
实现旋转的立方体我们首先要有一个立方体。制作立方体的过程非常简单，只需要六张图片，两两一组。第一组图片一个沿着最右边，相对y轴旋转-90度；一个沿着最左边，相对y轴旋转90度。第二组图片一个沿着最底边，相对x轴旋转90度；一个沿着最上边，相对x轴旋转-90度。第三组图片一个不动，另一个沿着z轴向后移动一个正方形的边长的距离。这样就一个图片立方体就制作完成了。
img:nth-child(2) {
/* 设置旋转边 */
transform-origin: right;
/* 设置旋转角度 */
transform: rotateY(-90deg);
}实现旋转效果需要用到动画和3D效果。如果对动画还不是很了解的朋友可以参考CSS3-动画_可乐喽的博客-CSDN博客这篇文章，这里只说一下怎么实现3D效果。首先是“perspective”属性，个人理解是这个属性定义了我们看这个元素以及其子元素的视角，其值就是视距，也就是我们的眼睛距离成像的平面的距离。其次是"transform-style"这个属性定义了显示形式，由于我们需要3D效果，所以我们把它定义为“preserve-3d”。最后是“transform-origin”属性，该属性定义旋转的中心点，图像的旋转就是围绕着这个点进行的。
三、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D立方体</title>
<style>
* {
margin: 0;
padding: 0;
}
.box .wrap {
width: 300px;
height: 300px;
margin: 0 auto;
}
.box {
margin: 200px auto;
/* 定义视角 */
perspective: 1000px;
}
.wrap {
position: relative;
width: 100%;
height: 100%;
/* 3d效果显示 */
transform-style: preserve-3d;
animation: turn 3s linear infinite;
/* 定义旋转的位置 */
transform-origin: center center -150px;
}
img {
/* 将图像设置为正方形 */
width: 300px;
height: 300px;
position: absolute;
top: 0;
left: 0;
/* 设置图像的透明度 */
opacity: .8;
}
/* 一个图像沿着最右边 相对y轴旋转-90度 */
img:nth-child(2) {
transform-origin: right;
transform: rotateY(-90deg);
}
/* 一个图像沿着最左边 相对y轴旋转90度 */
img:nth-child(3) {
transform-origin: left;
transform: rotateY(90deg);
}
/* 一个图像沿着最底边 相对x轴旋转90度 */
img:nth-child(4) {
transform-origin: bottom;
transform: rotateX(90deg);
}
/* 一个图像沿着最上边 相对x轴旋转-90度 */
img:nth-child(5) {
transform-origin: top;
transform: rotateX(-90deg);
}
/* 一个图像沿z轴向后移动300px */
img:last-child {
transform: translateZ(-300px);
}
/* 定义旋转动画 */
@keyframes turn {
from {
transform: rotate3d(1, 1, 0, 0deg);
}
to {
transform: rotate3d(1, 1, 0, 360deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="wrap">
<img src="https://img2.woyaogexing.com/2022/07/30/0e093e8294fd0c28!400x400.jpg" alt="">
<img src="https://img2.woyaogexing.com/2022/07/30/a718129a8cc564d3!400x400.jpg" alt="">
<img src="https://img2.woyaogexing.com/2022/07/30/cc2796029e811a52!400x400.jpg" alt="">
<img src="https://img2.woyaogexing.com/2022/07/28/6b892a9d495f666b!400x400.jpg" alt="">
<img src="https://img2.woyaogexing.com/2022/06/23/c61bcd84592137fa!400x400.jpg" alt="">
<img src="https://img2.woyaogexing.com/2022/06/23/940c4e898b4b3c9e!400x400.jpg" alt="">
</div>
</div>
</body>
</html>