概念：

　　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. ubuntu18 任务栏调到底部

    $ gsettings set org.gnome.shell.extensions.dash-to-dock dock-position BOTTOM 原因如下: https://askubuntu ...

  2. SonarQube7.4安装和使用

    声明 本文转自:https://www.jianshu.com/p/dd4a4bc59fc3?from=singlemessage 正文 近期比较关注代码的检测,之前由于用的findbugs,因此没有 ...

  3. Nginx+keepalived实现负载均衡高可用配置

    1. 什么是负载均衡高可用 nginx作为负载均衡器,所有请求都到了nginx,可见nginx处于非常重点的位置,如果nginx服务器宕机后端web服务将无法提供服务,影响严重. 为了屏蔽负载均衡服务 ...

  4. win10安装grafana

    1.下载grafana-6.2.5.windows-amd64.msi 2.以管理员身份打开CMD 3.输入 msiexec /i 程序的完整路径 msiexec /i xxx.msi

  5. 阿里云Maven仓库地址setting配置

    <?xml version="1.0" encoding="UTF-8"?> <settings xmlns="http://mav ...

  6. jenkins服务器使用python脚本rabbitmqadmin和shell对目标服务器进行管理

    jenkins服务器使用python脚本rabbitmqadmin和shell对目标服务器进行管理 准备工作: .jenkins服务器,安装rabbitmqadmi命令 rabbitmqadmin管理 ...

  7. (转)SpringBoot使用@Value给静态变量注入

    Spring boot之@Value注解的使用总结 https://blog.csdn.net/hunan961/article/details/79206291

  8. springboot 读取配置文件

    读取配置文件 在以前的项目中我们主要在 XML 文件中进行框架配置,业务的相关配置会放在属性文件中,然后通过一个属性读取的工具类来读取配置信息. 在 Spring Boot 中我们不再需要使用这种方式 ...

  9. Prometheus监控实战day1-监控简介

    福利 Prometheus监控实战PDF电子书下载 链接:https://pan.baidu.com/s/1QH4Kvha5g70OhYQdp4YsfQ 提取码:oou5 若你喜欢该资料,请购买该资料 ...

  10. pdf转换成jpg不清晰怎么办

    用Photoshop打开pdf文件,然后用“文件”-“另存为”“JPG”.