transform:rotate3d/tranlate3d

transform:rotate3d(x,y,z,angle);

rotate3d 代表在3D空间，元素沿着经过原点(0,0,0) 和三维坐标(x,y,z) 2点的直线进行旋转。其中：

x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
y：是一个0到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
z：是一个0到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
angle：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。

衍生 3个属性分别为:

- rotateX(angle)
  指定沿著 x 軸根據指定角度的順時針方向旋轉。
  相当于 rotate(1,0,0,angle);
- rotateY(angle)
  指定沿著 y 軸根據指定角度的順時針方向旋轉。
  相当于 rotate(0,1,0,angle);
- rotateZ(angle)
  指定沿著 z 軸根據指定角度的順時針方向旋轉。
  相当于 rotate(0,0,1,angle);

@keyframes huang {20% {-webkit-transform: rotate3d(0,0,1,15deg);transform: rotate3d(0,0,1,15deg);}40% {-webkit-transform: rotate3d(0,0,1,-10deg);transform: rotate3d(0,0,1,-10deg);}60% {-webkit-transform: rotate3d(0,0,1,5deg);transform: rotate3d(0,0,1,5deg);}80% {-webkit-transform: rotate3d(0,0,1,-5deg);transform: rotate3d(0,0,1,-5deg);}100% {-webkit-transform: rotate3d(0,0,1,0deg);transform: rotate3d(0,0,1,0deg);}}

transform:translate3d(x,y,z) x,y,z平移的距离

转载于:https://www.cnblogs.com/yangqing22/p/6589694.html

transform:rotate3d/tranlate3d相关推荐

css3中3D转换动画效果---transform: rotate3d(x,y,z,) 3D 旋转
CSS3 允许您使用 3D 转换来对元素进行格式化. 转换属性属性描述 CSS transform 向元素应用 2D 或 3D 转换. 3 transform-origin 允许你改变被转换元素的 ...
关于CSS3的3D效果样式transform属性中的rotate3d
1.介绍在css3中新加了一些3d特效,如translate3d,scale3d,rotate3d,与css3中的2d特效最大的区别就是多了个z轴,因此才有了3d效果.因为scale3d(x,y,z ...
深入理解CSS变形transform(3d)
前面的话本文将详细介绍关于transform变形3D的内容,但需以了解transform变形2D为基础.3D变形涉及的属性主要是transform-origin.transform.transfor ...
css transform旋转属性
将以下代码复制到本地就可以看到效果: <!DOCTYPE html> <html lang="en"> <head><meta chars ...
html52D转换3D,CSS3 Transform 2D和3D转换
1.2 缩放语法transform : scale(x,y); -webkit-transform : scale(x,y); 根据倍数来缩放,取决于宽度(X轴)和高度(Y轴)的参数:也可以用一个参 ...
CSS3 Transform变形理解与应用
CSS3 Transform变形理解与应用 Transform:对元素进行变形: Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞. ...
[转] css3变形属性transform
w3c上的例子是这样子写的:· div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform: ...
html3d变形,深入理解CSS变形transform(3d) - 小火柴的蓝色理想
前面的话本文将详细介绍关于transform变形3D的内容,但需以了解transform变形2D为基础.3D变形涉及的属性主要是transform-origin.transform.transfor ...
2D转换和3D转换 transform
目录一.转换的概念二.2D转换 2.1 translate 2.2 scale 2.3 rotate 2.4 变形原点三.3D转换 3.1 景深 3.2 实现3d效果 3.3 3D位移 3.4 ...

transform:rotate3d/tranlate3d

transform:rotate3d/tranlate3d相关推荐

最新文章

热门文章