CSS3实现立体正方形3D旋转效果（参考）

最近学习CSS3系列已经好长一段时间了，也做过不少的项目，但是 transform属性 接触不多，所以一直没有做过实战，最近也是新捉摸的transform属性，正好从网上也看到有正方形3D旋转，就做了一个出来，利用它的3D特性做了个3D点击旋转的正方形（如下图所示），刚学不久，代码难免有写的不好的地方，希望大家多多批评指正。

初识transform

顾名思义：变换！就可以想到它可以做很多很多的事情了，这个属性有很多的值，在这里简单列举一下：

• translate(x,y)、translateX(x)、translateY(y)、translateZ(z)、translate3d(x,y,z)：定义位置的移动距离。
• scale(x,y)、scaleX(x)、scaleY(y)、scaleZ(z)、scale3d(x,y,z)：定义元素的缩放比例。
• rotate(angle)、rotateX(a)、rotateY(a)、rotateZ(a)、rotate3d(x,y,z,angle)：定义元素的旋转角度。
• skew(x-angle,y-angle)、skewX(angle)、skewY(angle)：定义元素的倾斜角度。

3D效果的认知

我们可以看到这是一个三维的空间图，不要被第一眼的复杂感吓到，仔细分解一下其实还是很容易理解的：反正就X轴、Y轴、Z轴三个方向嘛。

想象一下，假如你现在坐在电脑面前，电脑屏幕中心是原点，原点往右就是X轴正方向，往下就是Y轴正方向，往屏幕前方（也就是往人脸）的方向就是Z轴的正方向了。把坐标轴的方向搞清楚了，上面的方法就能正确的使用了。

transform-style属性

transform-style指定嵌套元素如何在3D空间中呈现。

transform-style: flat | preserve-3d

flat是默认值，表示所有子元素在2D平面呈现；preserve-3d表示所有子元素在3D空间中呈现。

因此，我们想要实现一些3D效果的时候，transform-style: preserve-3d;是少不了的。一般而言，该声明应用在3D变换的兄弟元素们的父元素上，我们可以叫它容器。

perspective属性

perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

注释：perspective 属性只影响 3D 转换元素。

 

绘制正方体

不多说废话了，直接上代码：

HTML代码

HTML代码:
<input type="radio" name="select" id="front" value=""/>
<label for="front" class="text">正面</label>

<input type="radio" name="select" id="left" value=""/>
<label for="left" class="text">左面</label>

<input type="radio" name="select" id="right" value=""/>
<label for="right" class="text">右面</label>

<input type="radio" name="select" id="top" value=""/>
<label for="top" class="text">上面</label>

<input type="radio" name="select" id="bottom" value=""/>
<label for="bottom" class="text">下面</label>

<input type="radio" name="select" id="back" value=""/>
<label for="back" class="text">背面</label>

<div class="btn"></div>

<div class="view">
  <div class="box">
    <div class="face box_front"><img src="img/bg25.jpg"/></div>
    <div class="face box_left"><img src="img/bg26.jpg"/></div>
    <div class="face box_right"><img src="img/bg27.jpg"/></div>
    <div class="face box_top"><img src="img/bg28.jpg"/></div>
    <div class="face box_bottom"><img src="img/bg29.jpg"/></div>
    <div class="face box_back"><img src="img/bg30.jpg"/></div>
  </div>
</div>

CSS代码

CSS代码：
*{
　　margin: 0;
　　padding: 0;
}

body{
　　color: #333;
　　text-align: center;
　　font-family: georgia,"times new roman",times,serif;
}

input{display: none;}

label{
　　display: inline-block;
　　width: 80px;
　　height: 30px;
　　margin: 150px 0 0 10px;
　　line-height: 30px;
　　border: 1px #333 solid;
　　border-radius: 10px;
　　cursor: pointer;
}

label:hover{
　　background-color: #666;
　　color: white;
}

.btn{margin: 100px auto;}

.view{
　　perspective: 1000px;
　　display: inline-block;
　　width: 250px;
　　height: 250px;
　　text-align: center;
}

.box{
　　display: inline-block;
　　width: 100%;
　　height: 100%;
　　position: relative;
　　text-align: center;
　　transition: all 0.8s ease;
　　transform-style: preserve-3d;/*设置其子元素3d属性*/
　　transform: rotateX(-20deg) rotateY(20deg);
}

.face{
　　overflow: hidden;
　　position: absolute;
　　border: 1px #666 solid;
　　background-color: #fff;
　　box-shadow: inset 0 0 rgba(0,0,0,0.4);
　　color: #333;
　　line-height: 250px;
　　opacity: 0.8;
}

.box_front{
　　width: 250px;
　　height: 250px;
　　transform: translate3d(0,0,125px);
}

.box_left{
　　width: 250px;
　　height: 250px;
　　transform: rotateX(-90deg) translate3d(0,0,125px);
}

.box_right{
　　width: 250px;
　　height: 250px;
　　transform: rotateX(90deg) translate3d(0,0,125px);
}

.box_top{
　　width: 250px;
　　height: 250px;
　　transform: rotateY(-90deg) translate3d(0,0,125px);
}

.box_bottom{
　　width: 250px;
　　height: 250px;
　　transform: rotateY(90deg) translate3d(0,0,125px);
}

.box_back{
　　width: 250px;
　　height: 250px;
　　transform: rotateY(180deg) translate3d(0,0,125px);
}

.face img {
　　width: 100%;
　　height: 100%;
}

#left:checked ~ .view .box {transform: rotateY(90deg);}
#right:checked ~ .view .box {transform: rotateY(-90deg);}
#top:checked ~ .view .box {transform: rotateX(-90deg);}
#bottom:checked ~ .view .box {transform: rotateX(90deg);}
#back:checked ~ .view .box {transform: rotateY(180deg);}

---

演示及下载地址：

---

总而言之，在学习CSS3的过程中，见到了不少的新特性，也学会了如何使用，但是我想说的是我们不管要学会怎么使用，更要去理解每一行代码为什么产生对应的效果，特别是对于3D transform，我们要从根本去理解了3D空间，才能更好的去掌握它的每一个属性值能够带来的效果。