<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 2D转换</title>
<style>
div.ex1{
width: 200px;
height: 100px;
background-color: yellow;
text-align: center;
/* Rotate div*/
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9*/
-webkit-transform: rotate(30deg); /* Safari and Chrome*/
}
div.ex2{
width: 100px;
height: 75px;
background-color: red;
border: 1px solid black;
}
div.ex2#div2{
transform:translate(50px,100px);
-ms-transform:translate(50px,100px); /* IE 9 */
-webkit-transform:translate(50px,100px); /* Safari and Chrome */
}
div.ex3{
width: 100px;
height: 75px;
background-color: red;
border: 1px solid black;
}
div.ex3#div3{
transform: rotate(30deg);
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}
div.ex4{
margin: 150px;
width: 200px;
height: 100px;
background-color: yellow;
border: 1px solid black;
-ms-transform: scale(2,3);
-webkit-transform: scale(2,3);
transform: scale(2,3);
}
div.ex5{
width: 100px;
height: 75px;
background-color: red;
border: 1px solid black;
}
div.ex5#div5{
-ms-transform: skew(30deg,20deg);
-webkit-transform: skew(30deg,20deg);
transform: skew(30deg,20deg);
}
div.ex6{
width: 100px;
height: 75px;
background-color: red;
border: 1px solid black;
}
div.ex6#div6{
-ms-transform: matrix(0.866,0.5,-0.5,0.866,0,0);
-webkit-transform: matrix(0.866,0.5,-0.5,0.866,0,0);
transform: matrix(0.866,0.5,-0.5,0.866,0,0);
}
</style>
</head>
<body>
<h2>CSS3 2D 转换</h2>
<div class="ex1">Hello</div>
<br><br>
<h2>translate 转换</h2>
<div class="ex2">Hello. This is a DIV element.</div>
<div class="ex2" id="div2">Hello. This is a DIV element.</div>
<br><br><br><br>
<h2>rotate 转换</h2>
<div class="ex3">你好 这是一个DIV 元素</div>
<div class="ex3" id="div3">你好 这是一个DIV元素</div>
<br><br><br><br>
<h2>scale 转换</h2>
<p>scale() 方法用于增加或缩小元素的大小。</p>
<div class="ex4">
div 元素的宽度是原始大小的两倍，高度是原始大小的三倍。
</div>
<br><br><br><br>
<h2>skew 转换</h2>
<div class="ex5">Hello. This is a DIV element.</div>
<div class="ex5" id="div5">Hello. This is a DIV element.</div>
<br><br><br><br>
<h2>matrix 转换</h2>
<div class="ex6">Hello. This is a DIV element.</div>
<div class="ex6" id="div6">Hello. This is a DIV element.</div>
</body>
</html>
CSS3 转换
CSS3 转换可以可以对元素进行移动、缩放、转动、拉长或拉伸。
1、浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
属性 Chrome IE Firefox Safari Opera
transform 36.0 10.0 16.0 23.0
4.0 -webkit- 9.0 -ms- 3.5 -moz- 3.2 -webkit- 15.0 -webkit-
12.1
10.5 -o-
transform-origin 36.0 10.0 16.0 23.0
(two-value syntax) 4.0 -webkit- 9.0 -ms- 3.5 -moz- 3.2 -webkit- 15.0 -webkit-
12.1
10.5 -o-
Internet Explorer 10, Firefox, 和 Opera支持transform 属性.
Chrome 和 Safari 要求前缀 -webkit- 版本.
注意： Internet Explorer 9 要求前缀 -ms- 版本.
2、2D 转换
2D变换方法：
translate()
rotate()
scale()
skew()
matrix()
实例
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}
3、translate() 方法
Translate
translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
OperaSafariChromeFirefoxInternet Explorer
实例
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像素。
4、rotate() 方法
Rotate
rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
实例
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}
rotate值（30deg）元素顺时针旋转30度。
5、skew() 方法
语法
transform:skew(<angle> [,<angle>]);
包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
skewX(<angle>);表示只在X轴(水平方向)倾斜。
skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
OperaSafariChromeFirefoxInternet Explorer
实例
div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}
6、matrix() 方法
Rotate
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 */
}
7、新转换属性
以下列出了所有的转换属性:
Property 描述 CSS
transform 适用于2D或3D转换的元素 3
transform-origin 允许您更改转化元素位置 3
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 轴。
网友评论