最近学习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);}

演示及下载地址:

[demo]http://demo.skillcat.me/css-css3/CSS3_3D_Rotation/index.html[/demo]   [download]http://demo.skillcat.me/css-css3/CSS3_3D_Rotation/3D_Rotation.zip[/download]


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


技术成就梦想,细节成就品质。