首页 专题 H5案例 前端导航 UI框架

用css3实现立方体

作者:TG 日期: 2016-08-09 阅读: 751
随着CSS3的出现,各大网站出现了许多酷炫的3D动画效果,不再局限于平面UI。下面,我就分享一下使用css 3D效果的经验。
首先,要制作3D效果,我们需要知道Web浏览器中是怎样确定坐标轴的。如图:

注:x轴平行,y轴垂直,z轴指向正对你的屏幕。z轴的零点就是屏幕所在的平面。
现在知道web浏览器的坐标轴是如何的定义后,接下来,我们需了解4个属性:

transform-style:preserve-3d;  //指定嵌套元素如何在3D空间中呈现

rotateX()  //沿X轴旋转

rotateY()  //沿Y轴旋转

translateZ()  //

1.transform-style
含义:指定嵌套元素如何在3D空间中呈现
值:flat值为默认值,表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。
注:一般定义在父元素中。
2.rotateX() 和rotateY()
含义:旋转
单位:deg
3.translateZ()
含义:沿Z轴平移
注:只有在transform-style:preserve-3d情况下,才起作用。

俗话:纸上得来终觉浅,我们还是需要实践的,下面一起来看一个实例:

上面的3D 立方体是纯css3制作的。
代码如下:
css:

.cude {   

  width:300px;   

  height:300px;   

  position: relative;   

  margin: 100px auto;   

  transform-style: preserve-3d;   

  -webkit-transform-style: preserve-3d;   

  transform: rotateX(-30deg) rotateY(-80deg);   

  -webkit-animation: rotate 20s infinite;   

  animation-timing-function: linear;   

  transform-origin: 50% 50% 0;   

  -webkit-transform-origin: 50% 50% 0;   

}       

.surface {   

  position: absolute;   

  top: 0;   

  left: 0;   

  width: 300px;   

  height: 300px;   

  background:#666;   

  opacity: 0.8;   

  font-size:100px;   

  text-align: center;   

  line-height:300px;   

  font-weight: bold;   

  color:#fff;   

  border:1px solid #fff;   

}       

.surface img {   

  width: 100%;   

}       

.front {   

  transform: rotateY(0) translateZ(150px);   

}       

.back {   

  transform: translateZ(-150px) rotateY(180deg);   

}       

.left {   

  transform: rotateY(-90deg) translateZ(150px);   

}       

.right {   

  transform: rotateY(90deg) translateZ(150px);   

}       

.top {   

  transform: rotateX(90deg) translateZ(150px);   

}       

.bottom {   

  transform: rotateX(90deg) translateZ(-150px);   

}       

@-webkit-keyframes rotate {   

  from {   

    transform: rotateX(0deg) rotateY(0deg);   

  }   

  to {   

    transform: rotateX(360deg) rotateY(360deg);   

  }   

}       

.surface-in{   

  width:150px;   

  height:150px;   

  position:absolute;   

  top:50%;   

  left:50%;   

  margin-top:-75px;   

  margin-left:-75px;   

}   

.surface-in img{   

  width:150px;   

  height:150px;   

}   

.front-in{   

  transform:rotateY(0deg) translateZ(75px);   

}   

.back-in{   

  transform:rotateY(180deg) translateZ(75px);   

}   

.left-in{   

  transform:rotateY(-90deg) translateZ(75px);   

}   

.right-in{   

  transform:rotateY(90deg) translateZ(75px);   

}   

.top-in{   

  transform:rotateX(90deg) translateZ(-75px);   

}   

.bottom-in{   

  transform:rotateX(-90deg) translateZ(-75px);   

}

HTML:

<div class="box">   

  <div class="cude">   

    //外3D立方体

    <div class="front surface">1</div>   

    <div class="surface left">2</div>   

    <div class="surface right">3</div>   

    <div class="surface bottom">4</div>

    <div class="surface top">5</div>   

    <div class="surface back">6</div>     //内3D立方体

    <div class="surface-in front-in"><img src="bgimg/a.jpg" alt="" /></div>   

    <div class="surface-in back-in"><img src="bgimg/b.jpg" alt="" /></div>   

    <div class="surface-in left-in"><img src="bgimg/c.jpg" alt="" /></div>   

    <div class="surface-in right-in"><img src="bgimg/d.jpg" alt="" /></div>   

    <div class="surface-in top-in"><img src="bgimg/e.jpg" alt="" /></div>   

    <div class="surface-in bottom-in"><img src="bgimg/f.jpg" alt="" /></div>   

  </div>   

</div>



关注”全栈技术杂货铺“

全栈技术杂货铺