CSS中2D转换的形式是这样的：

选择器{

transform：转换函数（参数，参数）；

}

其中transform（是transform 不是transfrom）定义元素的2D或者3D转换；

2D转换的函数一共分为五大类：

  • translate()   定义位移的函数；其中后面的参数分别是相对x轴，y轴的偏移的距离，单位为像素，形式：translate（30px,30px）;表示相对x轴，y轴偏移30像素值，可以为负值，表示反向偏移；
  • rotate()    定义旋转的函数；定义元素顺时针旋转给定的角度，允许负值，元素将逆时针旋转，单位为角度deg（degree），形式rotate（30deg）;元素顺时针旋转30度，负值表示逆时针选装；
  • scale()定义缩放的函数，根据给定的宽度（X 轴）和高度（Y 轴）参数，元素将进行缩放，单位为倍数，形式scale（2,2）;表示元素将会按照原尺寸在x轴，y轴分别放大2倍；可以为负数，表示旋转；
  • skew()定义翻转的函数，根据给定的（X 轴、Y 轴）参数进行翻转，单位为角度deg，形式为skew(30px,30px);表示元素会在x轴y轴方向偏转30度；可以为负数，表示反向偏转；
  • matrix() 函数方法把所有 2D 转换方法组合在一起，移动、旋转、缩放、以及翻转元素。注意的是：没有定义perspective（透视效果），没有预计的偏转效果。

示例：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>演示2D转换</title>

        <style type="text/css">

            #fr{

                width: 500px;

                height: 400px;

                border: 1px solid green;

                margin: 20px auto;

                overflow: hidden;

            }

            .ch{

                width: 80px;

                height: 80px;

                border: 1px solid black;

                margin: 10px;

            }

            #fr div:first-child{

                transform: translate(100px,0px);

                -moz-transform: translate(100px,0px);

                -webkit-transform: translate(100px,0px);

                -o-transform: translate(100px,0px);

                -ms-transform: translate(100px,0px);

            }

            #fr div:nth-child(2){

                background-color: gray;

                transform: rotate(30deg);

                -webkit-transform: rotate(30deg);

            }

            #fr div:nth-child(3){

                background-color: greenyellow;

                transform: scale(1.5,1.5) translate(100px)

            }

            #fr div:last-child{

                transform:  skew(30deg,20deg);

                background-color: springgreen;

            }

        </style>

    </head>

    <body>

        <div id="fr">

            <div class="ch"></div>

            <div class="ch"></div>

            <div class="ch"></div>

            <div class="ch"></div>

            </div>

        </div>

    </body>

</html>

浏览器解析页面：

第一个矩形div，在相对原位置（X轴）进行移动了100px；

第二个矩形div，相对自己的中心旋转了30度；

第三个矩形div，相对自己的原位置移动了100px，并且沿着x轴，y轴方向放大了1.5倍；

第四个矩形div，在x轴，y轴方向分别进行了翻转30度，20度；

这里的函数的位移、旋转、翻转，每一个函数都有自己默认的相对位置，这个位置也是符合我们的感性认知的。要修改旋转元素的基点位置，可以使用transform-origin 函数进行定义；

形式：transform-origin:20% 40%（注意这里没有括号，也没有 "，" 分割）;表示相对偏转的位置按照之前的位置移动沿着x轴、y轴移动 20%、40%。 w3c这个页面很好的进行了演示  http://www.w3school.com.cn/example/css3/demo_css3_transform-origin.html



默认的位置是按照元素的中心进行旋转的，也就是默认位置 transform-origin: 50% 50%;想要围绕元素左上角进行旋转使用参数 transform-origin: 0% 0%，右下角transform-origin: 100% 100%，以此类推，还可以使用transform-origin:top left; transform-origin:bottom right; 进行定义。


一个浏览器兼容性的问题：新版本的浏览器似乎都对 transform 定义的2D转换进行了支持，为了防止旧版本浏览器的兼容问题（Chrome 和 Safari 需要前缀 -webkit-），需要对浏览器做兼容性处理，因为你永远不知道网站访客使用的浏览器有多老！


ie浏览器 ：-ms-transform:


chrome 和Safari浏览器：-webkit-transform:


Opera浏览器：-o-transform:


Firefox浏览器：-moz-transform:
												


											
css 2D转换总结的更多相关文章
	

    
						
  1. CSS 2D 转换
		
    通过CSS 2D转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 2D转换一共五个属性:transfrom=> translate(X轴数值px,Y轴数值px):元素从其当前位置移动,根据 ...
    
		
    2. 
						
  2. css 2D转换 transform-rotate 画插图
		
    学习了一点2D转换,关于Transfrom-rotate的小用法 rotate()方法,在一个给定度数顺时针旋转的元素.负值是允许的,这样是元素逆时针旋转. 下面看实例 第一个例子是没有使用rotat ...
    
		
    3. 
								
  3. CSS 2D转换
		
    转换是使元素改变形状.尺寸和位置的一种效果.通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸,可以大致分为2D转换和3D转换.下面介绍的是2D转换的相关知识点. 首先,CSS中2D ...
    
		
    4. 
						
  4. CSS 2D转换 matrix() 详解
		
    2D转换 IE10.Firefox.Opera 支持 transform 属性 Chrome.Safari 需要前缀 -webkit- . IE9 需要前缀 -ms- . translate():接收 ...
    
		
    5. 
						
  5. CSS 3学习——transform 2D转换
		
    首先声明一点,transform属性不为none的元素是它的定位子元素(绝对定位和固定定位)的包含块,而且对内创建一个新的层叠上下文. 注意:可以通过 transform-box 属性指定元素的那个盒 ...
    
		
    6. 
						
  6. CSS中2d转换：transition过渡放在:hover伪类中与应用在整个元素中区别
		
    css的2d转换十分强大,能够在不使用js的情况下,实现页面的元素与用户之间更多动态的交互,增强用户体验.其中使用最多的就是hover伪类. 1.创建一个页面的div元素: <!DOCTYPE  ...
    
		
    7. 
						
  7. CSS新特性之2D转换transform
		
    transform是css3中具有颠覆性特征之一,可以实现元素的位移.旋转.缩放等效果 1.位移translate 1.1语法 transform: translate(x,y);//x,y分别表示x ...
    
		
    8. 
						
  8. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)
		
    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...
    
		
    9. 
						
  9. css3之2D转换
		
    css3---2D转换 css3中出现了许多新的特性,其中2D转换我觉的非常有意思,通过她,我们能够对元素进行移动.缩放.转动.拉长或者拉伸,所以希望在这里和大家分享一下. 这里,我将会介绍到以下转换 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. sparse linear regression with beta process priors
			
    虽然翻译水平有限,但是看原文虽然看得懂,但是在词汇的问题上,会导致看了后面忘了前面,所以先蹩脚的翻译成中文,然后在仔细思考论文的思想(当然不能翻译成中文就不看英文原本了,得两者一起看,这样不会丢失前面 ...
    
			
    2. 
						
  2. Makefile 学习记录一
			
    2019年2月5日10:18:13  大年初一 整理 uboot-2018-11 源代码 根目录下的 Makefile . ifeq ("$(origin O)", "c ...
    
			
    3. 
						
  3. 「PKUSC2018」最大前缀和 LOJ#6433&BZOJ5369
			
    分析: 这个题非常的棒,目测如果去了能AC... 我们考虑一个序列是如何构成的——一个后缀>0的序列,和一个前缀<0的序列 问题可以简化为求出当前缀和为状态S的所有数的和的时候,S满足后缀 ...
    
			
    4. 
						
  4. 1.2《想成为黑客，不知道这些命令行可不行》(Learn Enough Command Line to Be Dangerous)——开始第一条命令
			
    现在开始准备运行我们的第一条命令了,在屏幕上打印'hello'.(字符打印的地方被称为'标准输出',通常指的是屏幕,很少指真的物理打印机设备).这条命令就是echo,这条命令的参数是想要输出的字符串或 ...
    
			
    5. 
						
  5. C++STL之Vector的应用
			
    这是我第一次写博客,请多指教! vector是一种向量容器,说白了就是可以改变大小的数组. vector是一个模板类,如果直接这样会报错: vector a; //报错,因为要指定模板. 需要像这样: ...
    
			
    6. 
						
  6. SAP调用RestfulApi接口接收数据
			
    因为准备要做一个关于调用外部接口的需求,所以自己先练习一下. 程序说明:我已经在.net开发的系统里提供一个api接口,现在在sap访问这个接口,来接收数据. 这里涉及Restful Api知识,以后 ...
    
			
    7. 
						
  7. CLR回收非托管资源
			
    一.非托管资源 在<垃圾回收算法之引用计数算法>.<垃圾回收算法之引用跟踪算法>和<垃圾回收算法之引用跟踪算法>这3篇文章中,我们介绍了垃圾回收的一些基本概念和原理 ...
    
			
    8. 
						
  8. flask使用sqlit3的两种方式
			
    方式一:raw_sql import sqlite3 from flask import Flask, request, jsonify app = Flask(__name__) DATABASE_ ...
    
			
    9. 
						
  9. 3.RapidIO串行物理层的包传输过程
			
    转自https://www.cnblogs.com/liujinggang/p/10005431.html 一.引言 前几篇文章已经谈到RapidIO的协议,串行物理层与控制符号. RapidIO协议 ...
    
			
    10. 
						
  10. VirtualBox虚拟机怎么导入已经存在的vdi文件
			
    VirtualBox虚拟机怎么导入已经存在的vdi文件 第一章 1.原因 早上一不小心将virtualBox 卸载了,(不知道怎么了, 里面得虚拟机全部都没有了,但是vdi文件还在) 2.解决办法 直 ...
    
			
    11.