点击上方“IT平头哥联盟”,选择“置顶或者星标”
本文作者:安佳,360 搜索事业部的前端开发工程师,W3C CSS 工作组成员。
今天和大家分享两个和 CSS 3D 相关的属性/值:
为什么要分享它们两个呢?最近在 100dayscss 上做 CSS 题的时候,被下面这个效果给难住了。
当时鬼使神差地就是不知道如何把图 1.1 变成图 1.2。
图 1.1
图 1.2
后来偷偷作弊了下,才知道是漏了transform-style: preserve-3d。和 3D 密切相关的还有一个perspective属性,故本文重点介绍下这两个。
perspective属性决定了z=0平面和用户眼睛之间的距离,当绘制 3D 的时候会用到。
先来看个例子:立方体,宽 100px 高 100px,其中心点在坐标系的原点(0,0,0)处。
立方体的中心点在(0,0,0),所以z=0平面也在立方体的中心点位置
下表是不同perspective下的效果(在线预览):
perspective:0px
perspective:50px
perspective:51px
perspective:100px
说明:
注意:
perspective的值可以是none和<length>, 当值是 0 或者负数时,则不会有 3D 效果
transform-style 属性决定了元素的子元素是在 3D 空间中展开,还是在 2D 平面中展开。
注意:
这个概念比较好理解。我们直接以开头的例子为例:
每小片rotateX(-24deg)
父容器未设置 3d
父容器设置了transform-style:preserve-3d
说明:
目前伞整体是往里扣着的,现在,我们把它再转过来。即给伞的父容器设置:
transform: rotateX(70deg) rotateY(-15deg); /* 前后翻转个角度,再倾斜下 */transform-style: preserve-3d; /* 需要是 3d 上下文 */
最终的效果就实现了:
完整代码,可点击在线预览3。
- end -
用心分享 一起成长 做有温度的攻城狮
每天记得对自己说:你是最棒的!