transform：

　　None不转换。

　　Translate(x,y)通过设置X轴的值进行移动。

　　translateY(y)通过设置Y轴的值进行移动。

　　Scale(x,y)定义2D缩放。

　　ScaleX(x)通过设置X轴来进行缩放。

　　ScaleY(y)通过设置y轴来进行缩放。

　　Rotate(45deg)角度旋转。

　　Rotate(45rad)弧度旋转。

　　Skew(x-angle,y-angle)倾斜。

　　SkewX(angle)沿x轴倾斜。

　　skewY(angle)沿y轴倾斜。

Transform-origin:改变基准点。

　　像素或百分比。

　　x轴：left/right/center

　　y轴：top/bottom/center

3D变形，就是在2D变形的基础上，多了z轴的参数。

9.css3动画-2D/3D变形--trasform的更多相关文章

  1. css3动画 2D 3D transfrom

    2D transform 例如transform: translate(1px,30px); translate() 方法 translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当 ...

  2. css3动画2D、3D转换

    css3动画的2D.3D转换代码: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  3. CSS3中2D/3D转换、过渡、动画

    转换.过渡.动画 2D 转换 1.translate() 方法 通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数: 实例 d ...

  4. CSS3动画属性：变形(transform)

    Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. 语法 t ...

  5. IT兄弟连 HTML5教程 CSS3属性特效 3D变换1

    3D变换较2D变换多了一下的转换属性,3D转换属性及描述如表1: 表1  3D转换属性 3D的转换方法如表2: 表2  3D转换方法     1  transform-style transform- ...

  6. CSS3——2D变形和3D变形

    2D变形(CSS3) transform transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能 ...

  7. 前端笔记之HTML5&CSS3（下）2D/3D转换&animate动画

    一.2D转换(transform) CSS3中的transform转换和PS中的变换是一样的,分别有:缩放.位移.斜切.旋转 1.1 transform:scale()缩放 transform:sca ...

  8. CSS3中的3D动画实现(钟摆、魔方)--实现代码

    CSS3中的3D动画实现(钟摆.魔方) transition-property 过渡动画属性  all|[attr] transition-duration 过渡时间 transition-delay ...

  9. 如何制作css3的3d动画——以骰子旋转为例，详解css3动画属性

    首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5   6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective: ...

随机推荐

  1. Windows下如何安装Redis

    Redis可以从下面的github上面下载,当前的下载版本为3.2.100版本 https://github.com/MicrosoftArchive/redis/releases 这边都是64位的链 ...

  2. pom.xml报Plugin execution not covered by lifecycle configuration错误

    环境     eclipse 4.3.0     maven 3.0.4     m2e 1.4.0      出现场景     以前的老项目,在我的环境(我的环境较新)下,别人老环境不报错. 错误示 ...

  3. Boston House Price with Scikit-Learn

    Boston House Price with Scikit-Learn Data Description >>> from sklearn.datasets import load ...

  4. Oracle中如何生成随机数字、随机字符串、随机日期

    .随机小数 dbms_random.value(low,high): --获取一个[low,high)之间的小数,包含low,不包含high 可以结合trunc函数获取整数 例如: select db ...

  5. CircleCi 不更新某个分支的两种方法

    概述 今天我发现我的所有项目的 CircleCi 部署全部都会更新 gh-pages 分支.找了好久,终于找到了不更新的方法.于是我总结了一下,记录下来,供以后开发时参考,相信对其他人也有用. onl ...

  6. 二十：jinja2之加载静态文件

    静态文件: flask默认指定的静态文件路径为根目录下的static,可以自定义路径,并指定,使用url_for('文件夹', filename='文件名')引用 加载css文件 加载js文件 其他文 ...

  7. Python学习之==>数组（一）

    1.定义数组 city = [] # 定义一个空数组 name = ['Jack','Panda','Bob','Franck'] # 根据下标找元素,最前面一个元素的下标是0,最后一个元素下标是-1 ...

  8. ALV SCRIPTFROM 内容比较全的一个例子

    REPORT  ZQM_PRT04. *----------------------------------------------------------------------* * TABLES ...

  9. frei0r-20190715-118a589 编译 frei0r 时注意事项

    如果滤镜是 CPP 编写,需要选择 gcc Thread model: win32 模式,如果选择 posix 模式时,提示错误: 无法找到 dll 文件: frei0r-1.6.1-dlls-201 ...

  10. Day02:正则表达式 / Object / 包装类

    JAVA正则表达式 实际开发中,经常需要对字符串数据进行一些复杂的匹配,查找,替换等操作. 通过"正则表达式",可以方便的实现字符串的复杂操作. 正则表达式是一串特定字符,组成一个 ...