概念：

　　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;

示例

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <style type="text/css">

     * {margin: 0; padding: 0}

     div {width: 100px; height: 100px; background: #f0f; margin: 20px auto;}

     div:nth-child(1):hover {transform:translateX(200px);}

     div:nth-child(2):hover {transform:scale(2, 2);}

     div:nth-child(3):hover {transform:rotate(30deg);}

     div:nth-child(4):hover {transform:skew(30deg, 30deg);}

     div:nth-child(5):hover {transform-origin:left center; transform:rotate(-30deg);}

     div:nth-child(6):hover {transform:translateX(200px) scale(2, 2) skew(30deg, 30deg)}

     </style>

 </head>

 <body>

     <div>translate()：位移</div>

     <div>scale()：缩放</div>

     <div>rotate()：旋转</div>

     <div>skew()：倾斜</div>

     <div>transform-origin：中心原点</div>

     <div>transform 综合使用</div>

     </div>

 </body>

 </html>

结果

CSS-2D动画笔记的更多相关文章

  1. css 2D动画

    2D动画: 通过 CSS3  transform转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 2D移动:translate().使用translate()函数,你可以把元素从原来的位置移动. ...

  2. 2D动画的制作

    通过css3的transform  transition可以实现平移,旋转,缩放,拉伸等效果 1.缩放 -webkit-transform: scale(1); -moz-transform: sca ...

  3. （2）《Head First HTML与CSS》学习笔记---img与基于标准的HTML5

    1.浏览器处理图像的过程: 1.服务器获取文件,显示出文本结构,以及预留默认的大小给<img>(如果该<img>有width-1值和height-1值,则根据这个值提前设好页面 ...

  4. css3-11 如何实现2D动画

    css3-11 如何实现2D动画 一.总结 一句话总结:就是transform属性,属性值为1.translate()    2.rotate()    3.scale(),而这是哪个属性值是带参数的 ...

  5. CSS 2D 转换

    通过CSS 2D转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 2D转换一共五个属性:transfrom=> translate(X轴数值px,Y轴数值px):元素从其当前位置移动,根据 ...

  6. CSS变形动画

    CSS变形动画 前言 在开始介绍CSS变形动画之前,可以先了解一下学习了它之后能做什么,有什么用,这样你看这篇文章可能会有一些动力. 学习了CSS变形动画后,你可以为你的页面做出很多炫酷的效果,如一个 ...

  7. 《CSS世界》笔记二：盒模型四大家族

    上一篇:<CSS世界>笔记一:流/元素/尺寸下一篇:<CSS世界>笔记三:内联元素与对齐 写在前面 在读<CSS世界>第四章之前,粗浅的认为盒模型无非是margin ...

  8. CSS揭秘读书笔记 （一）

    CSS揭秘读书笔记      (一) 一.半透明边框 要想实现半透明边框可以使用border: border: 10px  solid  hsla(0,0%,100%,.5); background: ...

  9. css居中学习笔记

    css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...

随机推荐

  1. SpringBoot——配置文件加载位置及外部配置加载顺序

    声明 本文部分转自:SpringBoot配置文件加载位置与优先级 正文 1. 项目内部配置文件 spring boot 启动会扫描以下位置的application.properties或者applic ...

  2. 直接从ADB接出串口调试

    1,从硬件接出串口线 2,用串口工具连接上串口工具,串口工具地址:https://files.cnblogs.com/files/senior-engineer/%E4%B8%B2%E5%8F%A3% ...

  3. 试图从目录中执行 CGI、ISAPI 或其他可执行程序

    首先来看我遇到问题时的情况,直接上图!   从上图的错误提示信息可以看出,是权限不够,被拒绝访问,开始我以为是我的程序的php程序的原因,但是其他站点没事啊,就对这个站点的权限重新分配了下,给了最高权 ...

  4. 【jmeter】使用csv文件生成用户名和密码列表

    介绍 在[jmeter]使用jmeter进行测试-示例 中介绍了jmeter的基本使用,本文将介绍如何使用csv文件生成多个用户名. 应用场景 实际测试中,经常需要模拟多个用户进行负载测试,而用户名和 ...

  5. Python 使用 paho-mqtt

    https://blog.csdn.net/weixin_41656968/article/details/80848542 https://blog.csdn.net/lhh08hasee/arti ...

  6. Docker-Compose简介及常用命令

    1.Docker-Compose简介 Docker-Compose项目是Docker官方的开源项目,负责实现对Docker容器集群的快速编排.Docker-Compose将所管理的容器分为三层,分别是 ...

  7. (原)理解码率控制模式(x264,x265,vpx)

    理解码率控制模式(x264,x265,vpx) 原文链接:https://slhck.info/video/2017/03/01/rate-control.html 翻译:lihaiping1603@ ...

  8. 【Docker学习之四】Docker自定义容器镜像

    环境 docker-ce-19.03.1-3.el7.x86_64 centos 7 一.使用已有容器创建镜像-docker commit1.查看本地已有镜像 [root@node105 ~]# do ...

  9. PowerDNS + PowerDNS-Admin

    一.基础配置 1.1 环境说明 Centos 7.5.1804 PDNS MariaDB 1.2 关闭防火墙和 selinux setenforce sed -i 's/SELINUX=enforci ...

  10. Python怎么去写单元测试用例去测试hello world呢

    逛着博客园,看到乙醇大佬的一篇随笔 https://www.cnblogs.com/nbkhic/p/9370446.html,于是就在想怎么测试这句hello world print('hello ...