详解rotate3()
2016-05-26 10:44
507 查看
(最后的旋转基准就是坐标原点(0,0,0)和(x,y,z)的连线,第四个参数a是旋转角度)
转自http://tympanus.net/codrops/css_reference/rotate3d/
The
that is used to rotate an element in three-dimensional space.
The element is rotated by an
is passed in as the fourth parameter of the function. The first three parameters specify the rotation direction, and together they form a direction vector [x, y, z] which is used to apply the rotation
in the specified direction.
A positive angle value will rotate the element in the clockwise direction along the corresponding axis, and a negative value will rotate it in the counter-clockwise direction along that axis.
The clockwise direction is determined by looking at the vector starting from the end of the vector (where the pointing arrow usually is) towards the origin. The following image shows the positive (clockwise) direction of rotation along the three axes:
![](http://codropspz.tympanus.netdna-cdn.com/codrops/wp-content/uploads/2014/12/rotate3d.png)
The
positive direction of rotation along the three axes. Notice how if you stand at the end of each vector and look towards the origin, the clockwise rotation matches the one shown in the image.
The first three parameters of
Examples:
The following image shows the result of applying
![](http://codropspz.tympanus.netdna-cdn.com/codrops/wp-content/uploads/2014/12/rotate3d-example.jpg)
The
result of applying
The official syntax looks as follows:
For a better understanding of the transform functions, please refer to the transform entry.
The following is the support table for three-dimensional CSS transforms:
Transform
on the Codrops CSS Reference
CSS
Transforms Module 1
rotateX()
rotateY()
rotateZ()
<angle>
转自http://tympanus.net/codrops/css_reference/rotate3d/
The
rotate3d()function is a 3D transform function
that is used to rotate an element in three-dimensional space.
The element is rotated by an
<angle>which
is passed in as the fourth parameter of the function. The first three parameters specify the rotation direction, and together they form a direction vector [x, y, z] which is used to apply the rotation
in the specified direction.
A positive angle value will rotate the element in the clockwise direction along the corresponding axis, and a negative value will rotate it in the counter-clockwise direction along that axis.
The clockwise direction is determined by looking at the vector starting from the end of the vector (where the pointing arrow usually is) towards the origin. The following image shows the positive (clockwise) direction of rotation along the three axes:
![](http://codropspz.tympanus.netdna-cdn.com/codrops/wp-content/uploads/2014/12/rotate3d.png)
The
positive direction of rotation along the three axes. Notice how if you stand at the end of each vector and look towards the origin, the clockwise rotation matches the one shown in the image.
The first three parameters of
rotate3d()will specify the direction vector along which the rotation will happen, and the angle will specify the direction: clockwise along the vector or counter-clockwise.
Examples:
transform: rotate3d(1, 1, 2, 45deg); transform: rotate3d(2, 1, 3, 33deg); transform: rotate3d(1, 0, 0, 45deg); /* element is rotated clockwise along the x-axis by 45deg */ transform: rotate3d(0, 1, 0, 45deg); /* element is rotated clockwise along the y-axis by 45deg */ transform: rotate3d(0, 0, 1, 45deg); /* element is rotated clockwise along the z-axis by 45deg */ transform: rotate3d(0, 0, 0, 50deg); /* NO ROTATION IS APPLIED */
The following image shows the result of applying
rotate3d(1, 1, 1, 50deg);to an image:
![](http://codropspz.tympanus.netdna-cdn.com/codrops/wp-content/uploads/2014/12/rotate3d-example.jpg)
The
result of applying
rotate3d(1, 1, 1, 50deg);to an image
The official syntax looks as follows:
transform: rotate3d( <number> , <number> , <number> , <angle> );
For a better understanding of the transform functions, please refer to the transform entry.
Browser Support
The following is the support table for three-dimensional CSS transforms:
Further Reading
Transformon the Codrops CSS Reference
CSS
Transforms Module 1
Related Entries
rotateX()rotateY()
rotateZ()
<angle>
相关文章推荐
- CSS3属性教程与案例分享
- CSS3属性教程与案例分享
- CSS3的calc()使用
- 使用CSS3的appearance属性改变元素的外观
- Web布局连载——两栏固定布局(五)
- CSS3美化图片
- CSS3质感分析——表面线性渐变
- 分析选项卡底部内凹圆角制作
- 细说百度图片栏目——图片展示效果
- 8个实用的响应式设计框架
- 20+ Animation Scripts, Libraries and Plugins
- [div+css]晒晒最新制作专题推广页模板
- 盒子模型
- CSS选择器
- CSS样式优先权
- [css] line-height 百分比单位和数值单位的区别
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- 新时代编辑神器:Atom