CSS3转换(Transform)

Transform属性

• 概念：CSS3的变形属性，让元素在一个坐标系统中变形。
  这个属性包含一系列变形函数，可以移动，旋转和缩放元素。
• 语法：transform: none | []*
• 默认值：transform: none

2D转换

旋转：rotate()

• 概念：通过指定的角度参数对元素指定一个2D rotation(2D 旋转)
• 语法：transform: rotate()
• 参数：angle指旋转角度，正数表示顺时针旋转，负数表示逆时针旋转
• 补充：坐标原点是元素的中心，也就是说围绕元素的中心点旋转

.pic1 {
    -webkit-transform: rotate(7deg);
       -moz-transform: rotate(7deg);
        -ms-transform: rotate(7deg);
         -o-transform: rotate(7deg);
            transform: rotate(7deg);
}
2D转换

移动：translateX()，translateY()，translate()

根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动
坐标原点是元素的左上角，也就是说，以左上角为原点偏移

div > img {
    transform: translateX(200px);  // 水平方向(X轴)从左到右移动200px
    transform: translateY(200px);  // 垂直方向(Y轴)从上到下移动200px

    transform: translate(200px, 100px);
    // 水平方向(X轴)从左到右移动200px，垂直方向(Y轴)从上到下移动100px，同时移动

    transform:translate(200px);    //相当于 translate(200px,0)
}

缩放：scaleX()，scaleY()，scale()

指定对象的2D 缩放
坐标原点是元素的中心，也就是说，以元素中心为原点缩放

div > img {
    transform: scaleX(.6);     // 水平方向(X轴)缩放成原来的0.6倍
    transform: scaleY(.6);     // 垂直方向(Y轴)缩放成原来的0.6倍

    transform: scale(.6, .6);
    // 水平方向(X轴)缩放成原来的0.6倍，垂直方向(Y轴)缩放成原来的0.6倍，同时缩放

    transform:scale(.6);       // 相当于scale(.6, .6)
}

扭曲：skewX()，skewY()，skew()

指定对象的斜切扭曲
skewX：正值表示逆时针，负值表示顺时针
skewY：正值表示顺时针，负值表示逆时针
坐标原点是元素的中心，也就是说，以元素中心为原点斜切扭曲
有效值的范围是-90deg ~ 90deg

div > img {
    transform: skewX(15deg);    // 按逆时针15度沿X轴指定一个斜切扭曲。X轴的两条边会移动
    transform: skewY(15deg);    // 按顺时针15度沿Y轴指定一个斜切扭曲。Y轴的两条边会移动

    transform: skew(15deg, 15deg);
    // 按逆时针15度沿X轴指定一个斜切扭曲，按顺时针15度沿Y轴指定一个斜切扭曲，同时斜切扭曲

    transform: skew(15deg);     // 相当于skew(15deg，0)
}

3D转换

所有转换都以几何中心为原点操作

旋转：rotateX()，rotateY()，rotateZ()，rotate3d()

正值表示顺时针旋转，负值表示逆时针旋转

div > img {
    transform: rotateX(45deg);
    // 以X轴为中心顺时针旋转45度，想象一下人在单杠上旋转

    transform: rotateY(45deg);
    // 以Y轴为中心顺时针旋转45度，想象一下翻书

    transform: rotateZ(45deg);
    // 以Z轴为中心顺时针旋转45度，想象一下烤羊肉串的时候，旋转羊肉串

    // rotate3d(x, y, z, angle);
    // x/y/z的取值：0无效，非0有效，取值精度为0.01
    // 参数不允许省略

    transform: rotate3d(1, 0, 0, 45deg);   // 第一种写法
    transform: rotate3d(-1, 0, 0, 45deg);  // 第二种写法
    transform: rotate3d(.5, 0, 0, 45deg);  // 第三种写法
    // 以上三种写法的效果是一样的，以X轴为中心顺时针旋转45度，Y轴，Z轴不动
    // 当x/y/z中只设定一个值的情况下，非0都代表有效的意思，所以这种情况建议第一种写法

    transform: rotate3d(1, 1, 1, 45deg);
    // 以X轴，Y轴，Z轴为中心，分别顺时针旋转45度

    transform:rotate3d(.5, 1, 1, 45deg);
    // 以X轴为中心顺时针旋转22.5度，以Y轴，Z轴为中心顺时针旋转45度
    // 在设定多值的情况下，X轴的.5是有意义的，代表旋转角度的0.5倍

    transform:rotate3d(-1, -1, -1, 45deg);
    // 以X轴，Y轴，Z轴为中心，分别逆时针旋转45度
}

移动：translateZ()，translate3d()

// translateZ(z)，指定对象Z轴的平移，通常用于遮罩
div > img {
    transform: translateZ(200px);
}

// translate3d(x, y, z)，指定对象的3D位移
// 参数不允许省略
div > img {
    transform: translate3d(200px, 200px, 200px);
}

缩放：scaleZ()，scale3d()

// scaleZ(z)，指定对象Z轴的缩放
// 相当于厚度变薄
div > img {
    transform: scaleZ(.5);  // 厚度变为原来的0.5倍
}

// scale3d(x,y,z)，指定对象的3D缩放
// 参数不允许省略
div > img {
    transform: scale3d(.5, .5, .5);
}

Transform与坐标系统

• 概念：transform-origin属性允许你更改转换元素的位置，也就是允许你设置原点
• 语法：transform-origin: x-axis y-axis z-axis;

// 设置原点为左上角，也就是以左上角为中心顺时针旋转45度
div > img {
    transform: rotate(45deg);
    transform-origin: left top;
}

// 设置X轴25%位置的点为原点，围绕这个原点顺时针旋转45度
div > img {
    transform: rotate(45deg);
    transform-origin: 25% top;
}

扩展属性

transform-style属性

• 概念：指定嵌套元素是怎样在三维空间中呈现
• 语法：transform-style: flat(默认) | preserve-3d
• 参数：preserve-3d，可以呈现出3D环绕的效果
• 补充：由于此属性是指定嵌套元素的呈现效果，所以要设置在父元素上

div { position: relative; width: 760px; height: 760px; margin: auto;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

perspective属性

• 概念：指定观察者与[z=0]平面的距离，使具有三维位置变换的元素产生透视效果
• 语法：perspective: number | none(默认);
• 补充：值越小，观察者与屏幕越近，值越大，观察者与屏幕越远

// 不允许设置负值
div { position: relative; width: 760px; height: 760px; margin: auto;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
    perspective: 500px;
}

perspective-origin属性

• 概念：指定透视点的位置，也就是说，从哪个地方看3D模型
• 语法：perspective-origin: x-axis y-axis;
• 参数：默认50% 50%

div { position: relative; width: 760px; height: 760px; margin: auto;
    transform-style: preserve-3d;
    perspective: 500px;
    perspective-origin: bottom; // top | bottom | center
    // bottom：仰视图，top：俯视图，center：平视图
}

backface-visibility属性

• 概念：指定元素背面面向用户时是否可见
• 语法：backface-visibility: visible(默认) | hidden
• 补充：
  想象一下我们把内容写在一张玻璃上，当玻璃翻转过来的时候，我们可以看到反着的内容。
  如果这张玻璃是毛玻璃呢，那翻转过来我们什么也看不到。

div > .inner{
    backface-visibility: hidden;
}