css3全套教程,css3初学者教程

首页 > 教育 > 作者:YD1662024-05-18 15:27:24

如上图所示,伸出左手,让拇指和食指成“L”形,大拇指向右,食指向上,中指指向前方。拇指、食指和中指分别代表X、Y、Z轴的正方向,这样我们就建立了一个左手坐标系。

浏览器的这个平面,是X轴、Y轴;垂直于浏览器的平面,是Z轴。

旋转的方向:(左手法则)

左手握住旋转轴,竖起拇指指向旋转轴的正方向,正向就是其余手指卷曲的方向

从上面这句话,我们也能看出:所有的3d旋转,对着正方向去看,都是顺时针旋转。

格式:

transform: rotateX(360deg); //绕 X 轴旋转360度 transform: rotateY(360deg); //绕 Y 轴旋转360度 transform: rotateZ(360deg); //绕 Z 轴旋转360度

格式举例:

(1)rotateX 举例

css3全套教程,css3初学者教程(21)

效果:

css3全套教程,css3初学者教程(22)

上方代码中,我们最好加个透视的属性,方能看到3D的效果;没有这个属性的话,图片旋转的时候,像是压瘪了一样。

而且,透视的是要加给图片的父元素 div,方能生效。我们在后面会讲解透视属性。

(2)rotateY 举例:

css3全套教程,css3初学者教程(23)

效果:

css3全套教程,css3初学者教程(24)

上一页23456下一页

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.