Fork me on GitHub

CSS3 Transform常见效果一览

rotate(45deg)

rotateX(45deg)

rotateY(45deg)

rotateZ(45deg)

scale(2)

scaleX(2)

scaleY(2)

skew(45deg, 45deg)

skewX(45deg)

skewY(45deg)

translate(45px)

translateX(45px)

translateY(45px)

matrix(2, 2, 0, 2, 45, 0)

Perspective : 100

rotateX(90deg)

rotateY(45deg)

Perspective : 200

rotateX(90deg)

rotateY(45deg)

Transform origin

transform-origin : 100% 0 0
rotate(45deg)

transform-origin : 0 100% 0
rotate(45deg)

transform-origin : 0 100% 0
rotateX(45deg)

transform-origin : 0 100% 0
rotateX(45deg)

transform-origin : 0 100% 0
rotateY(45deg)

transform-origin : 100% 0 0
rotateY(45deg)

transform-origin : 100% 0 0
scale(2)

transform-origin : 0 100% 0
scale(2)

transform-origin : 100% 0 0
scaleX(2)

transform-origin : 0 100% 0
scaleX(2)

transform-origin : 100% 0 0
scaleY(2)

transform-origin : 0 100% 0
scaleY(2)