[第69课] 实现网页元素的3D旋转效果
讲师:李晓斌 长度:6分40秒 软件:Div+CSS 发布日期:2018年05日19日在前面介绍的2D旋转中已经实现了元素在平面上进行顺时针或逆时针旋转,在3D变形时,可以让元素在任何轴旋转。为此,CSS 3新增了3个旋转函数rotateX()、rotateY()和rotateZ()。
在三维空间中,使用rotateX()、rotateY()和rotateZ()函数让一个元素围绕X、Y、Z轴旋转,其基本语法格式如下。
transform: rotateX(<angle>);
transform: rotateY(<angle>);
transform: rotateZ(<angle>);
<angle>参数指的是一个旋转角度值,其值可以是正值也可以是负值。如果为正值,元素顺时针旋转;反之,如果为负值,元素逆时针旋转。
在三维空间中,除了rotateX()、rotateY()和rotateZ()函数可以让一个元素在三维空间中旋转之外,还有一个函数rotate3d(),其基本的使用语法格式如下。
transform: rotate3d(<x>,<y>,<z>,<angle>);
rotate3d()函数的参数说明如下表所示。
当<x>、<y>、<z>三个值同时为0时,元素在3D空间不做任何旋转。当<x>、<y>、<z>取不同的值时,和前面介绍的3个旋转函数功能等同。rotateX(<angle>)函数功能等同于rotate3d(1,0,0,<angle>);rotateY(<angle>)函数功能等同于rotate3d(0,1,0,<angle>);rotateZ(<angle>)函数功能等同于rotate3d(0,0,1,<angle>)。
-由于您对视频教程的言论、索要、传播、出售、租借,对学设计网造成的间接或直接经济损失,我们将追究您的法律责任,并有权索回对我们造成的经济损失。
-只要您浏览本网页我们就将视您已经阅读了本注意事项中所有条例,并且同意本事项的所有条例。
-学设计网拥有以上事项的最终解释权。
您必须 [ 登录 ] 才能发表评论!