电话
13363039260
如何通过CSS3实现旋转立方体
2024-01-17 15:58 小编
在立方体内部是六个侧面，它们被定义为单独的图形元素，每个元素具有单独的“后”，“顶”，“底”，“左”，“右”和“前”。所以首先我们要创建html代码。包含这六个元素。如下代码所示
<divclass="box">
<divclass="one"></div>
<divclass="two"></div>
<divclass="three"></div>
<divclass="four"></div>
<divclass="five"></div>
<divclass="six"></div>
</div>
然后设置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);
}
猜你喜欢
联络方式：
13363039260
微信二维码 