• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • transform

    版本:CSS3

    CSS transform 属性允许你旋转,缩放,倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。

    示例

    /* Keyword values */
    transform: none;
    
    /* Function values */
    transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
    transform: translate(12px, 50%);
    transform: translateX(2em);
    transform: translateY(3in);
    transform: scale(2, 0.5);
    transform: scaleX(2);
    transform: scaleY(0.5);
    transform: rotate(0.5turn);
    transform: skew(30deg, 20deg);
    transform: skewX(30deg);
    transform: skewY(1.07rad);
    transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0);
    transform: translate3d(12px, 50%, 3em);
    transform: translateZ(2px);
    transform: scale3d(2.5, 1.2, 0.3);
    transform: scaleZ(0.3);
    transform: rotate3d(1, 2.0, 3.0, 10deg);
    transform: rotateX(10deg);
    transform: rotateY(10deg);
    transform: rotateZ(10deg);
    transform: perspective(17px);
    
    /* Multiple function values */
    transform: translateX(10px) rotate(10deg) translateY(5px);
    
    /* Global values */
    transform: inherit;
    transform: initial;
    transform: unset;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE10以上版本的浏览器都支持transform

    语法

    transformnone| <transform-function>+

    取值:

    • none:不应用任何变换。
    • <transform-function>:要应用的一个或多个CSS变换函数。变换函数按从左到右的顺序相乘,这意味着复合变换按从右到左的顺序有效地应用。

    2D Transform Functions:

    • matrix():以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a,b,c,d,e,f]变换矩阵
    • translate():指定对象的2D translation(2D平移)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0
    • translatex():指定对象X轴(水平方向)的平移
    • translatey():指定对象Y轴(垂直方向)的平移
    • rotate():指定对象的2D rotation(2D旋转),需先有<transform-origin>属性的定义
    • scale():指定对象的2D scale(2D缩放)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认取第一个参数的值
    • scalex():指定对象X轴的(水平方向)缩放
    • scaley():指定对象Y轴的(垂直方向)缩放
    • skew():指定对象skew transformation(斜切扭曲)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0
    • skewx():指定对象X轴的(水平方向)扭曲
    • skewy():指定对象Y轴的(垂直方向)扭曲

    3D Transform Functions:

    • matrix3d():以一个4x4矩阵的形式指定一个3D变换
    • translate3d():指定对象的3D位移。第1个参数对应X轴,第2个参数对应Y轴,第3个参数对应Z轴,参数不允许省略
    • translatez():指定对象Z轴的平移
    • rotate3d():指定对象的3D旋转角度,其中前3个参数分别表示旋转的方向x,y,z,第4个参数表示旋转的角度,参数不允许省略
    • rotatex():指定对象在x轴上的旋转角度
    • rotatey():指定对象在y轴上的旋转角度
    • rotatez():指定对象在z轴上的旋转角度
    • scale3d():指定对象的3D缩放。第1个参数对应X轴,第2个参数对应Y轴,第3个参数对应Z轴,参数不允许省略
    • scalez():指定对象的z轴缩放
    • perspective():指定透视距离
    默认值none
    适用于所有块级元素及某些内联元素
    继承性
    动画性
    计算值指定值,但相对长度会转换为绝对长度
    媒体视觉

    实例

    transform: matrix(1, 2, 3, 4, 5, 6);
    transform: translate(120px, 50%);
    transform: scale(2, 0.5);
    transform: rotate(0.5turn);
    transform: skew(30deg, 20deg);
    transform: scale(0.5) translate(-100%, -100%);
    
    <div>Transformed element</div>
    <style>
    div {
      border: solid red;
      transform: translate(30px, 20px) rotate(20deg);
      width: 140px;
      height: 60px;
    }
    </style>
    
    Transformed element