CSS-2D动画笔记
概念:
2d 动画要是使用 transform 属性来实现文字或图像的的各种变形效果,如位移、缩放、旋转、倾斜等
transform属性变形方法:
translate():位移
将元素沿着水平方向(x轴)和垂直方向(y轴)移动
translatex(x):元素仅在水平方向移动(x轴移动)
translatey(y):元素仅在垂直方向移动(y轴移动)
transklate(x,y):元素在水平方向和垂直方向同时移动(x轴和y轴同时移动)
scale():缩放
将元素根据中心原点进行缩放。跟translate()方法一样
scalex(x):元素仅水平方向缩放(x轴缩放)
scaley(y):元素仅垂直方向缩放(y轴缩放)
scale(x,y):元素水平方向和垂直方向同时缩放(x轴和y轴同时缩放)
rotate():旋转
来将元素相对中心原点进行旋转。这里的旋转是二维的,不涉及三维空间的操作
例如:transform:rotate(
30
deg);
顺时针旋转
30
度
skew():倾斜
和translate()方法、scale()使用方法相同
skewx(x):使元素在水平方向倾斜(x轴倾斜)
skewy(y):使元素在垂直方向倾斜(y轴倾斜)
skew(x,y):使元素在水平方向和垂直方向同时倾斜(x轴和y轴同时倾斜)
transform-origin:中心原点
transform-origin属性取值有2种:一种是采用长度值,另外一种是使用关键字。长度值一般使用百分比作为单位,很少使用px、em等作为单位
例如:transform-origin:
right
center
;和transform-origin:100% 50%; 均是将原地设置在 右边中间位置
transform 综合使用
例如:transform:rotate(
30
deg) translatex(100px)
transform-origin:
right
center
;
示例
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="x-ua-compatible" content="ie=edge"> 7 <title>document</title> 8 <style type="text/css"> 9 * {margin: 0; padding: 0} 10 div {width: 100px; height: 100px; background: #f0f; margin: 20px auto;} 11 div:nth-child(1):hover {transform:translatex(200px);} 12 div:nth-child(2):hover {transform:scale(2, 2);} 13 div:nth-child(3):hover {transform:rotate(30deg);} 14 div:nth-child(4):hover {transform:skew(30deg, 30deg);} 15 div:nth-child(5):hover {transform-origin:left center; transform:rotate(-30deg);} 16 div:nth-child(6):hover {transform:translatex(200px) scale(2, 2) skew(30deg, 30deg)} 17 </style> 18 </head> 19 <body> 20 <div>translate():位移</div> 21 <div>scale():缩放</div> 22 <div>rotate():旋转</div> 23 <div>skew():倾斜</div> 24 <div>transform-origin:中心原点</div> 25 <div>transform 综合使用</div> 26 </div> 27 </body> 28 </html>
结果