您的位置: 首页  >  文章  >  css3 3d旋转-正方体

css3 3d旋转-正方体

分类: 文章 • 2024-01-27 16:36:43

首先展示下效果

css3 3d旋转-正方体

html结构：



<div id="state">
    <div class="cube">
        <div class="side front"></div>
        <div class="side back"></div>
        <div class="side left"></div>
        <div class="side right"></div>
        <div class="side top"></div>
        <div class="side botton"></div>
    </div>
</div>
 <div class="side top"></div> <div class="side botton"></div> </div></div>








1、舞台的搭建



设置视距属性，形成3D效果：（perspective）








#state{ /*搭建舞台*/
    margin: 200px auto;
    width: 300px;
    height: 300px;
    perspective: 1200px; /*设置3D视距*/
    font-size: 5em;
    font-weight: bold;
}









2、容器的设置





正方体的搭建，是通过定位将六个面的正方形，都重叠在一起，形成一个面，并设置子元素的3d效果，让子元素通过旋转和平移操作组成正方体： ps：注意得设置容器的宽高，否则，设置动画时，会出现旋转中心不是正方体的中点，而是某一条边。






.cube{      /*设置正方体*/
    position: relative;
    transform-style:preserve-3d;
    width:100%;
    height: 100%;
    animation: x-rotate 6s linear infinite;/*设置动画*/
}






3、六个正方形的通过旋转和平移形成正方体：戳这里-3d坐标参考





.side { /*设置定位使得正方形重叠*/
    color:blue;
    text-align: center;
    width: 300px;
    height: 300px;
    line-height: 300px;
    position: absolute;
    opacity: 0.7;
    background-color: black;
}




.front
{
    transform: translateZ(150px); /*往Z轴正平移等于物体离我们近了*/
    background-color: chartreuse;
}
.back{
    transform:translateZ(-150px) ;


/*往Z轴负平移等于物体离我们远了*/

 background-color: sandybrown;}.left{ transform: rotateY(-90deg) translateZ(150px); 


/*必须旋转后再平移，否则旋转的中点会改变，Z轴的平移方向可以参考3d坐标参考*/ 

 background-color: aqua;}.right{ background-color:cornflowerblue; transform: rotateY(90deg) translateZ(150px);}.top{ background-color:brown; transform: rotateX(90deg) translateZ(150px);}.botton{ background-color:saddlebrown; transform: rotateX(-90deg) translateZ(150px);}








最后附上详细资料的博客：3d立方体资料一












															

																					

								

									相关推荐