[关闭]
@guoxs 2015-06-26T14:18:37.000000Z 字数 2329 阅读 2411

CSS变形

CSS


transform

  1. transform:none|<transform-function>+

rotate(旋转)

  1. rotate(<angle>)
  2. transform:rotate(45deg);
  3. transform:rotate(-60deg);
  4. 左手做出“赞”的姿势,大拇指指的方向为Z轴方向,其余各指握向rotate的正方向。

translate(移动)

  1. translate(<translation-value><translation-value>?)
  2. translateX/Y(<translation-value>)
  3. transform:translateX(50px);
  4. transform:translate(50px,20%);两个值分别为X,Y
  5. 百分比参照物为元素本身,右下为正

scale(缩放)

  1. scale(<number> [,number]?)如果只有一个值的话则第二个值默认与第一个相等。
  2. scaleX(<number>)
  3. scaleY(<number>)
  4. transform:scale(1.2);
  5. transform:scale(1,1.2);

skew(倾斜)

  1. skew(<angle>[,<angle>]?)
  2. 前者Y轴往X轴方向倾斜角度,后者相反。
  3. skewX(<angle>)
  4. skewY(<angle>)
  5. transform:skew(30deg);
  6. transform:skew(30deg,30deg);加倍

transform:<'transform-function>+

  1. transform:translate(50%) rotate(45deg);
  2. transform: rotate(45deg) translate(50%);
  3. 上面两个表示方法不一样,因为元素坐标轴会跟着移动旋转。

transform-origin(设置原点的位置)

  1. transform-origin:
  2. [left|center|right|top|bottom|<percentage>|<length>]
  3. |
  4. [left|center|right|<percentage>|<length>]
  5. [top|center|bottom|<percentage>|<length>]<length>?
  6. |
  7. [center|[left|right]]&&[center|[top|bottom]]|<length>?
  8. transform-origin:50% 50%; 默认值,在中心点。
  9. transform-origin:0% 0%; 容器的最左上角。
  10. transform-origin:20%; 第二个值默认为50%。
  11. transform-origin:right(X最右) 50px(Y) 20px(Z);
  12. transform-origin:top right 20px; 右上角,Z轴移动20px

perspective(透视)

  1. perspective:none|<length>
  2. perspective:none;
  3. perspective:2000px(人眼距物体的距离);越近透视越明显。

perspective-origin(改变透视点位置)

  1. perspective-origin:
  2. [left|center|right|top|bottom|<percentage>|<length>]
  3. |
  4. [left|center|right|<percentage>|<length>]
  5. [top|center|bottom|<percentage>|<length>]
  6. |
  7. [center|[left|right]]&&[center|[top|bottom]]
  8. perspective-origin:50% 50%; 在物体正中间透视,默认值
  9. perspective-origin:left bottom; 从左下角透视,左下角透视效果最不明显。
  10. 如果只有一个值,则另外一个值默认50%。

translate3d() 3D移动

  1. translate3d(<translation-value>,<translation-value>,<translation-value>)
  2. translateX(<translation-value>)
  3. translateY(<translation-value>)
  4. translateZ(<length>)
  5. transformtranslate3d(10px,20%,50px);
  6. translateX(10px)
  7. translateY(20%)
  8. translateZ(50px)

scale3d() 3D缩放

  1. translate3d(<number>,<number>,<number>)
  2. translateX(<number>)
  3. translateY(<number>)
  4. translateZ(<number>)
  5. transform:scale3d(1.2,1.2,1);
  6. transform:scaleZ(5); 发现元素并没有放大。因为它只是把Z轴变大了5倍,并没有影响宽和高。投影没改变,只是离你的远近改变。

rotate3d() 3D旋转

  1. rotate3d(<number>,<number>,<number>)
  2. rotateX(<angle>)
  3. rotateY(<angle>)
  4. rotateZ(angle>)
  5. transform:rotate3d(1,0,0,45deg);以(0,0,0)与(1,0,0)为旋转轴旋转45deg.

transform-style

  1. transform-style:flat(扁平化)|preserve-3d

backface-visibility(背面是否可见)

  1. backface-visibility:visible|hidden
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注