详解rotate3()
来源:互联网 发布:知乎 美国大选 编辑:程序博客网 时间:2024/06/06 00:05
(最后的旋转基准就是坐标原点(0,0,0)和(x,y,z)的连线,第四个参数a是旋转角度)
转自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:
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:
rotate3d(1, 1, 1, 50deg);
to an imageThe 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
- Transform on the Codrops CSS Reference
- CSS Transforms Module 1
- 详解rotate3()
- 详解
- 详解
- 详解
- 详解
- &,&&,|,||详解
- 详解
- Scala详解--------基础知识详解
- Spring详解-----------事务详解
- github 详解详解
- InputFilter详解、TextWatcher详解
- Spring详解-----------事务详解
- 【词汇详解】事务详解
- Session 详解
- Session 详解
- sizeof详解
- 端口详解
- Meta详解~~~
- [mac]xcode配置说明--gtest&mysql
- 带有阻尼效果(橡皮筋效果)跳动的Loading动画
- JS遮罩插件 -- JqLoad
- Simple ABAP - Create allowed values in a characteristic by BAPI_CHARACT_CREATE
- hibernate不能自动建表的解决方案
- 详解rotate3()
- SQL Server查询所有数据库,一个数据库中所有表和表的所有字段
- 音调
- Android CheckBox的OnCheckedChangeListener监听传值
- Gas Station
- Blade模板变量使用集锦
- webstorm卡在scanning files to index
- 谱估计
- Android基础