CSS-2D动画笔记

2019-05-10 05:59:04来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

概念:

  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(30deg);顺时针旋转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(30deg) 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>

结果


原文链接:https://www.cnblogs.com/tynam/p/10841374.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:CSS-图片整合笔记

下一篇:adblock自定义规则