3D

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)

推荐阅读更多精彩内容