概念：

　　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. pg中与超时设置有关的参数

    statement_timeout控制语句执行时长,单位是ms.超过设定值,该语句将被中止.不推荐在postgresql.conf中设置,因为会影响所有的会话,如非要设置,应该设置一个较大值. loc ...

  2. Kafka的安装与使用(转)

    9.1 Kafka 基础知识 9.1.1 消息系统 点对点消息系统:生产者发送一条消息到queue,一个queue可以有很多消费者,但是一个消息只能被一个消费者接受,当没有消费者可用时,这个消息会被保 ...

  3. 关于在php中变量少写了一个$和页面不断转圈的问题排查和vim的自动补全方式

    php中的所有变量都是页面级的, 即任何一个页面, 最多 都只能在一个文件 : 当前页面内使用, 不存在跨 文件/ 跨页面的 作用域的变量! 因此, 即使是 $GLOBALS 这个变量, 虽然叫全局 ...

  4. New & make in go_Code

    概述 Go 语言中的 new 和 make 一直是新手比较容易混淆的东西,咋一看很相似.不过解释两者之间的不同也非常容易. 他们所做的事情,和应用的类型也不相同. 二者都是用来分配空间. new 函数 ...

  5. java多线程（三）线程的安全问题

    1.1. 什么是线程安全 如果有多个线程同时运行同一个实现了Runnable接口的类,程序每次运行结果和单线程运行的结果是一样的,而且其他的变量的值也和预期的是一样的,就是线程安全的:反之,则是线程不 ...

  6. SpringBoot入门-JPA（三）

    什么是JPA JPA全称Java Persistence API.JPA通过JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对象持久化到数据库中. pom.xml <par ...

  7. 查找算法(2)--Binary chop--二分查找

    1. 二分查找 (1)说明 元素必须是有序的,如果是无序的则要先进行排序操作. (2)基本思想: 也称为是折半查找,属于有序查找算法.用给定值k先与中间结点的关键字比较,中间结点把线形表分成两个子表, ...

  8. Linux 对音频万能处理的命令——SOX

    what's the SOX         SoX(即 Sound eXchange)是一个跨平台(Windows,Linux,MacOS 等)的命令行实用程序,可以将各种格式的音频文件转换为需要的 ...

  9. win10更改pip源

    摘自:https://blog.csdn.net/qq_31443999/article/details/88750833 win10安装TensorFlow卡崩更改为国内清华大学镜像源,即可. 具体 ...

  10. Ajax方式导出Excel，浏览器显示下载Excel表

    以前实现导出Excel,都是用form表单提交,因为jquery封装的ajax请求导出Excel,浏览器不显示文件. 但是这次的需求要带着header,form表单不能带header,百度了下,原生a ...