如何通过CSS3实现旋转立方体
导读： 在立方体内部是六个侧面，它们被定义为单独的图形元素，每个元素具有单独的"后"，"顶"，"底"，"左"，"右"和"前"。所以首先我们要创建html代码。包含这六个元素。如下代码所示 ...
在立方体内部是六个侧面，它们被定义为单独的图形元素，每个元素具有单独的"后"，"顶"，"底"，"左"，"右"和"前"。所以首先我们要创建html代码。包含这六个元素。如下代码所示
然后设置box的CSS属性，以及将它设置为3D元素。在这里需要注意要设置定位，目的是让六个元素可叠加在一起
.box{
position:relative;
width:200px;
height:200px;
transform-style:preserve-3d;
/*创造3D空间*/
-webkit-transform-style:preserve-3d;
transition:all5slinear;
}
接下来就要设置立方体的六个面
.boxdiv{
width:200px;
height:200px;
position:absolute;
left:0;
top:0;
transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
border:1pxsolid#46B8DA;
opacity:0.5;
}
六个面的公共部分设置完了，接下来就要设置这六个面的3d效果，我们可以通过transform属性来设置3D变化，它可以允许我们对元素进行旋转，移动，倾斜等
.one{
transform:rotateY(0deg)translateZ(100px);
background-color:rgb(255,118,19);
}
.two{
transform:rotateY(180deg)translateZ(100px);
background-color:rgb(231,78,72);
}
.three{
transform:rotateX(90deg)translateZ(100px);
background-color:rgb(75,165,165);
}
.four{
transform:rotateX(-90deg)translateZ(100px);
background-color:rgb(129,182,62);
}
.five{
transform:rotateY(90deg)translateZ(100px);
background-color:rgb(255,118,19);
}
.six{
transform:rotateY(-90deg)translateZ(100px);
background-color:rgb(244,208,114);
}
这样我们的立方体就做好了，当鼠标移上去的时候就会发生旋转
.box:hover{
transform:rotateX(360deg)rotateY(360deg);
-webkit-transform:rotateX(360deg)rotateY(360deg);
}
本文转载自中文网
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 如何通过CSS3实现旋转立方体
本文地址： https://pptw.com/jishu/664704.html