如何通过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);
 
  }


Tag: 如何
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码