CSS3相关属性笔记

1.transform相关属性

transform: rotate(60deg) 旋转60度 正值顺时针旋转 负值逆时针旋转

Paste_Image.png

transform: scale(2.0) 放大原来的两倍 正负值都是放大

Paste_Image.png

transform: translate(20px,20px) 相对应X、Y轴偏移 等同于

transform: translateX(20px) translateY(20px)

Paste_Image.png

transform: skew(10deg, 10deg)对应的X轴Y轴歪（倾斜）有点特么3D的感教mmp

Paste_Image.png

transform:

2.transition(过渡、转变)相关属性

transition: background 3s;

demo http://js.jirengu.com/yogediraxa/1/edit

transition: transform 3s;

demo http://js.jirengu.com/vurozowoba/1/edit?html,css,output

transition: opacity 3s;

demo http://js.jirengu.com/sodigobaki/1/edit

3. animation（动画）属性

demo http://js.jirengu.com/ruyazugejo/1/edit