CSS3 3D 变幻

2019年9月14日 179次阅读 来源: 叔叔张

本文在我博客上的链接: http://lpgray.me/article/44

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轴是冲着我们迎面而来的，所以我们看不到它。

《CSS3 3D 变幻》

  • 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);
}

[<img src=”http://zysmedia.qiniudn.com/css3d-3.png&quot; style=”width:100%;float:none”/>]()

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

translateZ

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

perspective

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

  • perspective:100px：这个用在变换元素的父容器上，表示你看父容器的整体视角

  • transform: perspective(100px): 这个直接用在变换元素 上，表示单独看变换元素的视角

有什么不同之处？

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

[<img src=”http://zysmedia.qiniudn.com/css3d-4.png&quot; style=”width:100%;float:none”/>]()

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

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

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

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

    原文作者：叔叔张
    原文地址: https://segmentfault.com/a/1190000002398445
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞