3D类似2D的加强版
-
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
Defines a 3D transformation, using a 4x4 matrix of 16 values -
translate3d(x,y,z)
Defines a 3D translation -
translateX(x)
Defines a 3D translation, using only the value for the X-axis -
translateY(y)
Defines a 3D translation, using only the value for the Y-axis -
translateZ(z)
Defines a 3D translation, using only the value for the Z-axis -
scale3d(x,y,z)
Defines a 3D scale transformation -
scaleX(x)
Defines a 3D scale transformation by giving a value for the X-axis -
scaleY(y)
Defines a 3D scale transformation by giving a value for the Y-axis -
scaleZ(z)
Defines a 3D scale transformation by giving a value for the Z-axis -
rotate3d(x,y,z,angle)
Defines a 3D rotation -
rotateX(angle)
Defines a 3D rotation along the X-axis -
rotateY(angle)
Defines a 3D rotation along the Y-axis -
rotateZ(angle)
Defines a 3D rotation along the Z-axis -
perspective(n)
透镜，望远镜
例子
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s,height 1s; /* For Safari 3.1 to 6.0 */
transition: width 2s,height 1s;
}
div:hover {
height:400px;
width: 300px;
}
</style>
</head>
<body>
<div></div>
</body>```
[查看代码演示](https://wujianxing.github.io/html/3d/)
``` transition: width 2s, height 4s;即，要改变的属性
transition-timing-function 变化速度控制
ease ：开始和结束都减速
linear：平均速度
ease-in：开始慢
ease-out：结束慢
cubic-bezier(n,n,n,n) 用贝塞尔曲线，自定义速度```
[查看代码演示](https://wujianxing.github.io/html/3d/transition_speed)
网友评论