欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

CSS-2D动画笔记

程序员文章站 2022-03-30 09:29:43
概念: 2D 动画要是使用 transform 属性来实现文字或图像的的各种变形效果,如位移、缩放、旋转、倾斜等 transform属性变形方法: translate():位移 将元素沿着水平方向(X轴)和垂直方向(Y轴)移动 translateX(x):元素仅在水平方向移动(X轴移动) trans ......

概念:

  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>

结果

CSS-2D动画笔记