目录
一、效果展示
二、原理
--打开transform-style的preserve-3d模式
--将6张图片进行绝对定位,使之重合
--通过rotate旋转,成为盒子的六个面
--添加keyframes动画效果
三、代码(图片来自本地,请自行解决背景图片)
<!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>
@keyframes box {
from {
transform: rotateX(0) rotateZ(0);
}
to {
transform: rotateX(360deg) rotateZ(360deg);
}
}
.html {
perspective: 800px;
}
body {
perspective: 800px;
}
.box {
margin: 100px auto;
transform-style: preserve-3d;
height: 200px;
width: 200px;
position: relative;
animation: box 10s infinite linear alternate;
}
.box div {
background-color: rgba(192, 192, 192, 0.3);
position: absolute;
}
img {
vertical-align: top;
}
.side3 {
transform: rotateY(90deg) translateZ(100px);
}
.side4 {
transform: rotateY(-90deg) translateZ(100px);
}
.side5 {
transform: rotateX(90deg) translateZ(100px);
}
.side6 {
transform: rotateX(-90deg) translateZ(100px);
}
.side1 {
transform: rotateY(180deg) translateZ(100px);
}
.side2 {
transform: rotateY(0deg) translateZ(100px);
}
</style>
</head>
<body>
<div class="box">
<div class="side1">
<img
src="../src/paradise/photo/dream.png"
alt=""
width="200px"
height="200px"
/>
</div>
<div class="side2">
<img
src="../src/paradise/photo/ture.png"
alt=""
width="200px"
height="200px"
/>
</div>
<div class="side3">
<img
src="../src/paradise/photo/save.png"
alt=""
width="200px"
height="200px"
/>
</div>
<div class="side4">
<img
src="../src/paradise/photo/gold.png"
alt=""
width="200px"
height="200px"
/>
</div>
<div class="side5">
<img
src="../src/paradise/photo/fight.png"
alt=""
width="200px"
height="200px"
/>
</div>
<div class="side6">
<img
src="../src/paradise/photo/light.png"
alt=""
width="200px"
height="200px"
/>
</div>
</div>
</body>
</html>