上一节:
下一节:

  CSS 3D变换

  • CSS转换

    CSS变换允许您平移，旋转，缩放和倾斜元素。变换是一种让元素改变形状，大小和位置的效果。CSS支持2D和3D转换。

  • 3D变换浏览器支持

    表中的数字指定了完全支持该属性的第一个浏览器版本。数字后跟-ms-， -webkit-，-moz-或-o-指定使用前缀的第一个版本。
    属性 Internet Explorer Chrome FireFox Safari Opera
    属性格式
    transform 10.0 36.0 12.0-webkit- 16.0 10.0-moz- 9.0 4.0-webkit- 23.0 15.0-webkit-
    transform-origin (三个值的语法) 10.0 36.0 12.0-webkit- 16.0 10.0-moz- 9.0 4.0-webkit- 23.0 15.0-webkit-
    transform-style 10.0 36.0 12.0-webkit- 16.0 10.0-moz- 9.0 4.0-webkit- 23.0 15.0-webkit-
    perspective 10.0 36.0 12.0-webkit- 16.0 10.0-moz- 9.0 4.0-webkit- 23.0 15.0-webkit-
    perspective-origin 10.0 36.0 12.0-webkit- 16.0 10.0-moz- 9.0 4.0-webkit- 23.0 15.0-webkit-
    backface-visibility 10.0 36.0 12.0-webkit- 16.0 10.0-moz- 9.0 4.0-webkit- 23.0 15.0-webkit-

  • CSS 3D变换

    在本章中，您将了解以下3D转换方法：
    • rotateX()
    • rotateY()
    • rotateZ()

  • rotateX()方法

    rotateX()方法以给定的角度围绕其X轴旋转元素： 
    #myDiv {
     -webkit-transform: rotateX(150deg); /* Safari */
     transform: rotateX(150deg);
   }
    尝试一下

  • rotateY()方法

    rotateY()方法以给定的角度围绕其Y轴旋转元素： 
    #myDiv {
     -webkit-transform: rotateY(130deg); /* Safari */
     transform: rotateY(130deg);
   }
    尝试一下

  • rotateZ()方法

    rotateZ()方法以给定的角度围绕其Z轴旋转元素： 
    #myDiv {
     -webkit-transform: rotateZ(90deg); /* Safari */
     transform: rotateZ(90deg);
   }
    尝试一下

  • CSS变换属性

    下表列出了所有3D变换属性：
    属性 描述
    transform 对元素应用2D或3D转换
    transform-origin 允许您更改已转换元素上的位置
    transform-style 指定如何在3D空间中呈现嵌套元素
    perspective 指定如何查看3D元素的透视图
    perspective-origin 指定3D元素的底部位置
    backface-visibility 定义元素在不面对屏幕时是否应该可见

  • 3D变换方法

    方法 描述
    matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义一个3D转换，使用16个值组成的4x4矩阵
    translate3d(x,y,z) 定义3D转换
    translateX(x) 定义一个3D转换，只使用x轴的值
    translateY(y) 定义一个3D转换，只使用y轴的值
    translateZ(z) 定义一个3D转换，只使用z轴的值
    scale3d(x,y,z) 定义一个三维变换
    scaleX(x) 通过给出x轴的值来定义一个三维尺度变换
    scaleY(y) 通过给出y轴的值来定义三维尺度变换
    scaleZ(z) 通过给出z轴的值来定义一个三维尺度变换
    rotate3d(x,y,z,angle) 定义一个3D旋转
    rotateX(angle) 定义沿x轴的三维旋转
    rotateY(angle) 定义沿y轴的三维旋转
    rotateZ(angle) 定义沿z轴的三维旋转
    perspective(n) 定义3D转换元素的透视图

  • 相关页面

    HTML教程：HTML样式
上一节:
下一节: