概念：

　　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. mvn命令修改pom打包的版本号

    在java项目中打包经常需要修改镜像的版本号.可以使用如下命令 mvn versions: // 如果要打包使用人如下命令,打印详细信息使用 -X mvn clean deploy -e -Dskip ...

  2. Golang指针与unsafe

    前言 我们知道在golang中是存在指针这个概念的.对于指针很多人有点忌惮(可能是因为之前学习过C语言),因为它会导致很多异常的问题.但是很多人学习之后发现,golang中的指针很简单,没有C那么复杂 ...

  3. Flutter中极光推送的使用----jpush_flutter

    原文地址:https://www.cnblogs.com/niceyoo/p/11095994.html 1.申请极光账号和建立应用 极光推送的官方网址为:https://www.jiguang.cn ...

  4. Flask 上传下载文件

    上传文件示例代码 #encoding:utf8 from werkzeug.utils import secure_filename from flask import Flask,render_te ...

  5. SQL中merge into用法

    从备份表中更新字段到正式表中,使用 UPDATE 批量更新大量的数据,会出现效率低下,有时候甚至卡死的情况,后面通过使用 MERGE INTO 代替 UPDATE 执行批量更新,会提升执行效率. ME ...

  6. ssh连接的原理

    ssh是linux系统中的一个远程连接工具,也是一种网络协议,通过各种加密算法达到安全连接的效果.若能使用ssh连接到另外一台机器上,我们就可以认为是安全的.本节主要介绍的是ssh连接的原理以及ssh ...

  7. MySQL Community Server 8.0.16

    1 首先 我们需要先下载一个 Mysql 点击这个网址进入 Mysql 的官网的下载地址: https://dev.mysql.com/downloads/mysql/ 首先 根据你的电脑的操作系统选 ...

  8. 修改IP地址之后认证信息问题

    $ ssh lvph@172.16.20.20 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNING: REMOT ...

  9. CentOS 7.7安装Erlang和Elixir

    安装之前,先看一下它们的简要说明 Erlang Erlang是一种开源编程语言,用于构建对高可用性有要求的大规模可扩展的软实时系统.它通常用于电信,银行,电子商务,计算机电话和即时消息中.Erlang ...

  10. jQuery.js引入时要在其他js文件之前，否则js中无法识别jQuery的语法