1.首先必须对3d坐标足够熟悉,如下图
初始页面在xy所在页面,默认3d转换中心在图的中点。
2.我们需要构成6个页面,形成一个正方形,代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="fk.PNG">
<title>css3D盒子</title>
<style>
html{
perspective: 1000px; /*定义 3D 元素距视图的距离*/
background-color: black;
}
.box{
width: 200px;
height: 200px;
margin: 300px auto;
position: relative;
transform-style: preserve-3d;
animation: xuanzhuan 5s infinite linear;
}
@keyframes xuanzhuan {
0%{
transform: rotateX(0) rotateY(0) ;
}
100%{
transform: rotateX(360deg) rotateY(360deg) ;
}
}
.box>div{
width: 100%;
height: 100%;
position: absolute;
text-align: center;
line-height: 200px;
}
.front{
background-image: linear-gradient(160deg, #b100ff 20%,#00b3ff 80%);
}
.back{
background-image: linear-gradient(160deg, #ff0064 20%,#ca00ff 80%);
}
.left{
background-image: linear-gradient(160deg, #0078ff 20%,#ca00ff 80%);
}
.right{
background-image: linear-gradient(160deg, #00ffd5 20%,#008cff 80%);
}
.top{
background-image: linear-gradient(160deg, darkorchid 20%,#00b3ff 80%);
}
.bottom{
background-image: linear-gradient(160deg, #a200ff 20%,#cf3700 80%);
}
/* .front{
background-image: url('1.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
}
.back{
background-image: url('1.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
}
.left{
background-image: url('2.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
.right{
background-image: url('2.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
.top{
background-image: url('3.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
}
.bottom{
background-image: url('3.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
} */
</style>
</head>
<body>
<div class="box" id="box">
<div class="front"></div>
<div class="back"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
<div class="bottom"></div>
</div>
<script>
var box = document.getElementById("box");
var boxChild = box.children;
var listStyle = ["translateZ(200px)","translateZ(-200px)","rotateY(-90deg) translateZ(-200px)",
"rotateY(90deg) translateZ(-200px)","rotateX(-90deg) translateZ(-200px)","rotateX(90deg) translateZ(-200px)"];
var listHtyle = ["translateZ(100px)","translateZ(-100px)","rotateY(90deg) translateZ(100px)",
"rotateY(-90deg) translateZ(100px)","rotateX(90deg) translateZ(100px)","rotateX(-90deg) translateZ(100px)"];
box.onmousemove = function () {
for (let i=0;i<boxChild.length;i++){
boxChild[i].style.transform = listStyle[i];
}
};
box.onmouseout = function () {
for (let i=0;i<boxChild.length;i++){
boxChild[i].style.transform = listHtyle[i];
}
};
//初始化
for (let i=0;i<boxChild.length;i++){
boxChild[i].style.transform = listHtyle[i];
}
</script>
</body>
</html>
下面对这个代码,有个简单的说明:
首先,我们有6个重合的div,然后我们需要对他们位置进行修改。分别对他们进行处理,100px是父容器200px的一半。沿着z轴向前后移动100px得到前后2个面;绕Y轴旋转90和-90度之后,沿着Z轴移动100px得到的是左右2个面;绕X轴旋转90和-90度之后,沿着Z轴移动100px得到的是上下2个面。这里需要注意一点,当存在2个3d转换的属性一起使用时,例如rotateX(90deg) translateZ(100px),后面的转换会以前面的为坐标,因为3D转换,坐标系会跟着一起变动。
3.根据上面的,我们可以得到一个正方体了,可以随意的把div换成我们喜爱的图片,并且给父容器加上旋转动画,一个不错的3d盒子就出来了