CSS3 3D 变换

3d

CSS的3D变换已经不是个新东西了

为什么要写这篇文章呢?最近经常会做公司的一些移动端滑屏宣传小站,里面会用到很多交互动画,手机端的兼容性已经慢慢变好,我们完全可以使用CSS3来制作一些比较炫的效果,实际上现在我已经开始用了,诸如 animation 之类的。那在手机上做一些3D变换的效果未来一定会有类似的需求出现,所以研究研究CSS的3D变换是有必要的。

先贴一些资源吧

就说说下面几个3D相关的CSS技术点,多了就不说了。

  • rotateX, rotateY, rotateZ
  • transformZ
  • perspective
  • -webkit-transform-style: preserve-3d;

其实CSS3还包括 translate3d 这种用法,在这次就不记录了,以下介绍的属性足以应对常规需求。

rotateX, rotateY, rotateZ

transform:rotate(45deg) 这个属性很简单,顺时针旋转45度,这是在平面上旋转。如果是 transform:rotateX(45deg) 呢,大家可以看下图,想象一下电脑屏幕是一个空间坐标系,有x, y, z 三个轴,x、y轴可以看到,但是z轴是冲着我们迎面而来的,所以我们看不到它。

xyz

  • transform:rotateX(45deg),就是绕x轴旋转,也就相当于你现在往前趴的方向
  • transform:rotateY(45deg),就是绕y轴旋转,也就是现在你坐了转椅转动的方向
  • transform:rotateZ(45deg),就是绕z轴旋转,其实跟 transform:rotate(45deg) 是一样的效果

所以这三个属性很简单,很容易明白,就想象你坐着转椅在一个空屋子里,你左右旋转是 Y,你往前趴就是 X,你头往身体左右侧倾斜就是 Z,可以试试下面的代码:


// html
<div class="container">
    <div class="item rotateX">rotateX</div>
    <div class="item rotateY">rotateY</div>
    <div class="item rotateZ">rotateZ</div>
</div>
// css
.item{
    width: 100px;height: 100px;background: #ccc;text-align: center; line-height: 100px;
}
.rotateX{
    -webkit-transform:perspective(200px) rotateX(45deg);
}
.rotateY{
    -webkit-transform:perspective(200px) rotateY(-45deg);
}
.rotateZ{
    -webkit-transform:perspective(200px) rotateZ(45deg);
}

看了这个图,肯定觉得不够3D,因为往前趴,往左右转并没有远小近大的视觉感,这个时候就要借助 perspective 了。

translateZ

transform:translateZ(100px) ,这个属性也很简单,想象元素由远及近的从屏幕中走向你就好啦。

perspective

perspective 即视角,透视。上文的 rotateX,rotateY 没有那种立体感,借助这个属性就可以实现,这个属性呢有两种用法:

  • perspective:100px:这个用在变换元素的父容器上,表示你看父容器的整体视角
  • transform: perspective(100px): 这个直接用在变换元素 上,表示单独看变换元素的视角
有什么不同之处?

不同之处大了。看看下面的图是在父容器上应用 perspective:100px,上面是不带 perspective 的,下面是带 perspective 的。

不过是不是跟你想的效果不一样,没错,这是对整个父容器应用视角了,如果你将perspective应用在变换对象上,就能达到你想要的效果了。

.rotateX{
    -webkit-transform:perspective(100px) rotateX(45deg);
}

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

使用3D变换属性已经能实现一些诸如翻卡牌、开门的效果了,如果结合css其他的变幻属性还能做出更加立体的东西,在我的正方体代码中还包含了一个技术点 -webkit-transform-style: preserve-3d; 这个属性的意义在于你的变化是从3D视角看,还是平面视角看,可以自己修改下我的代码体会体会。

See the Pen CSS3 Perspective by lpgray (@lpgray) on CodePen.