2D转换transform

2D变换方法:

  • translate()  
  • 根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。
    div { transform: translate(50px,100px); 
    -ms-transform: translate(50px,100px); /* IE 9 */
    -webkit-transform: translate(50px,100px); /* Safari and Chrome */ }

translate值(50px,100px)是从左边元素移动50个像素,并从顶部移动100像素。

  • rotate()   
  • 在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。
    div { transform: rotate(30deg); 
    -ms-transform: rotate(30deg); /* IE 9 */
    -webkit-transform: rotate(30deg); /* Safari and Chrome */ }

rotate值(30deg)元素顺时针旋转30度。

  • scale()  

scale()方法,该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数:

-ms-transform:scale(2,3); /* IE 9 */ 
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */

scale(2,3)转变宽度为原来的大小的2倍,和其原始大小3倍的高度。

  • skew()
transform:skew(<angle> [,<angle>]);

包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。
  • skewX(<angle>);表示只在X轴(水平方向)倾斜。
  • skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
div { transform: skew(30deg,20deg); 
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */ }

skew(30deg,20deg) 元素在X轴和Y轴上倾斜20度30度。

  • matrix()

matrix()方法和2D变换方法合并成一个。

matrix 方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。

利用matrix()方法旋转div元素30°

div { transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */ }

transform-origin 属性

设置旋转元素的基点位置:

div
{
transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
}

语法

transform-origin: x-axis y-axis z-axis;
描述
x-axis

定义视图被置于 X 轴的何处。可能的值:

  • left
  • center
  • right
  • length
  • %
y-axis

定义视图被置于 Y 轴的何处。可能的值:

  • top
  • center
  • bottom
  • length
  • %
z-axis

定义视图被置于 Z 轴的何处。可能的值:

  • length

2D 转换方法

函数 描述
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
translate(x,y) 定义 2D 转换,沿着 X 和 Y 轴移动元素。
translateX(n) 定义 2D 转换,沿着 X 轴移动元素。
translateY(n) 定义 2D 转换,沿着 Y 轴移动元素。
scale(x,y) 定义 2D 缩放转换,改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换,改变元素的宽度。
scaleY(n) 定义 2D 缩放转换,改变元素的高度。
rotate(angle) 定义 2D 旋转,在参数中规定角度。
skew(x-angle,y-angle) 定义 2D 倾斜转换,沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换,沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换,沿着 Y 轴。

【Demo】CSS3 2D转换的更多相关文章

  1. css3 2d转换3d转换以及动画的知识点汇总

    css3 2d转换 2d转换的方法: 1.移动 translate(x, y) 可以改变元素的位置,x.y可为负值: 2.缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x.y的取值 ...

  2. CSS3 2D转换

    CSS3 转换 通过CSS3转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 它如何工作? 转换是是元素改变形状.尺寸和位置的一种效果. 你可以使用2D或3D转换你的元素. 浏览器支持 属性 浏 ...

  3. CSS3 2D 转换

    2D 转换 在本章中,您将学到如下 2D 转换方法: translate() rotate() scale() skew() matrix() 您将在下一章学习 3D 转换. 实例 div { tra ...

  4. CSS3—— 2D转换 3D转换 过渡 动画

    2D转换 对元素进行移动.缩放.转动.拉长或拉伸 ————>  ————>   移动 顺时针旋转 扩大/缩小 倾斜 2D变换合并  3D转换 绕x轴 绕y轴 过渡 从一种样式逐渐改变为另一 ...

  5. HTML 学习笔记 CSS3 (2D转换)

    2.scaleX(<number>) : 使用 [sx,1] 缩放矢量执行缩放操作,sx为所需参数.scaleX表示元素只在X轴(水平方向)缩放元素,他的默认值是(1,1),其基点一样是在 ...

  6. css3 2D转换(2D Transform) 动画(Animation)

    transform 版本:CSS3 内核类型 写法 Webkit(Chrome/Safari) -webkit-transform Gecko(Firefox) -moz-transform Pres ...

  7. CSS3 2D转换 动画

    transform:translate(x,y): 过度  鼠标悬浮 在2s内完成所有变化 div { width:100px; height:100px; background:red; trans ...

  8. 我最喜欢用的css3之2D转换之translate用法

    CSS3 2D 转换 div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transfor ...

  9. CSS3 Transform变形(2D转换)

    Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开始,结束.Animation:对元素某个属性 ...

随机推荐

  1. 深入Redis内部-Redis 源码讲解(转)

    Redis作为 NoSQL 数据库的杰出代表,一直广受关注,其轻量级的敏捷架构,向来有存储中的瑞士军刀之称.下面推荐的一篇文章,从源码的角度讲解了Redis 的整个工作流程,是了解 Redis 流程的 ...

  2. (数据库之pymysql)

    权限管理http://www.cnblogs.com/linhaifeng/articles/7267587.html#_label6一.pymysql模块(安装与查询) 1.安装pymysql(py ...

  3. DRF(1) - REST、DRF(View源码解读、APIView源码解读)

    一.REST 1.什么是编程? 数据结构和算法的结合. 2.什么是REST? 首先回顾我们曾经做过的图书管理系统,我们是这样设计url的,如下: /books/ /get_all_books/ 访问所 ...

  4. 请教Hibernate和JPA什么区别?

    JPA是Java的持久化规范.Hibernate早期是一个ORM框架,后期是JPA的一个实现.

  5. 关于shared pool的深入探讨(六)-高Latch竞争案例

    研究了几天shared pool,没想到忽然就撞到问题上来了.作为一个案例写出来给大家参考一下吧. 问题起因是公司做短信群发,就是那个18万买的4000字的短信小说(嘘,小声点,我也没看过...).群 ...

  6. php imagemagick库安装使用

    imagemagick介绍: ImageMagick® is a software suite to create, edit, compose, or convert bitmap images. ...

  7. java要注意的问题2

    八.替Java省点内存 某些Java程序是CPU密集型的,但它们会需要大量的内存.这类程序通常运行得很缓慢,因为它们对内存的需求很大.为了能提升这类应用的性能,可得给它们多留点内存.因此,假设我们有一 ...

  8. appcmd应用

    appcmd资料: http://www.jb51.net/article/36024.htm 官方文档:https://docs.microsoft.com/zh-cn/iis/get-starte ...

  9. 微信小程序 使用腾讯地图SDK详解及实现步骤

    信小程序 使用腾讯地图SDK详解及实现步骤    微信小程序JavaScript SDK: 官方文档:http://lbs.qq.com/qqmap_wx_jssdk/index.html 步骤: 1 ...

  10. python selenium firefox使用

    演示的版本信息如下: Python 3.6.0 Selenium  3.5.0 Firefox 55.0.3 geckodriver v1.0.18.0 win64 1.前提准备 1.1 安装pyth ...