实例讲解CSS3中Transform的perspective属性的用法

2024-07-11 08:33:06

字体：大中小

来源：转载

供稿：网友

基础
CSS3的transform可以做2D的操作，当然也有3D。
但需要再一个拥有perspective属性的父元素才能显现3D的效果。
例如：

XML/HTML Code复制内容到剪贴板

perspective属性固名思义就是透视的意思；该属性可以定义3D视觉的角度，让底下子元素使用3D特效时能够完整显示。

perspective使用方法：

CSS Code复制内容到剪贴板

另外还有个属性叫perspective-origin
功能是用来定义X和Y轴为基础的3D位置(定义初始位置)

perspective-origin使用方法：
属性值：(x轴：left、center、right、长度、百分比) (y轴：top、center、bottom、长度、百分比)

CSS Code复制内容到剪贴板

/* perspective-origin 参数预设是50% 50% */ -webkit-perspective-origin: 40% 60%;/* Safari and Chrome */
-webkit-perspective-origin: 40px 60px;/* Safari and Chrome */ -moz-perspective-origin:left bottombottom; /* Firefox */

注意：perspective和perspective-origin受影响的是子元素，而非元素本身
最后就可以对div做3D的效果(rotateX和rotateY)

CSS Code复制内容到剪贴板

实例
以下两行语句有什么区别？

CSS Code复制内容到剪贴板

<div id="animateTest" style="-webkit-transform: perspective(400px) rotateY(40deg);">
<div id="animateTest" style="-webkit-transform: rotateY(40deg) perspective(400px);">