CSS3 3D transform 秒懂

来源:互联网 发布:信息技术软件介绍ppt 编辑:程序博客网 时间:2024/05/16 14:23

从Z轴方向直视

本文眼睛取Z轴正方向,例子为别人的作品,是眼睛通过画框透视梵高的向日葵。

主要属性:
perspective(产生3D效果主要属性):眼睛到原点的距离
translateZ:垂直方向,物体重心到原点的距离
translateY:水平横方向,物体重心到原点的距离
translateX:水平竖方向,物体到重心到原点的距离

rotateX:俯视物体沿X轴旋转后的效果
rotateY:俯视物体沿Y轴旋转后的效果
rotateZ:俯视物体沿Z轴旋转后的效果

转载例子帮助理解:
http://fangyexu.com/tool-CSS3Inspector.html

0 0