您的位置：首页 > Web前端 > CSS

[置顶] CSS3 2D转换（transform）

2018-02-23 15:32 891 查看
Write By Monkeyfly

以下内容均为原创，如需转载请注明出处。

CSS3 转换（transform）可以可以对元素进行移动、缩放、转动、拉长或拉伸。

问：它是如何工作的？

答：通过改变某个元素的大小，位置和形状来实现的。

2D转换的方法有：

translate()     平移；转化，转变
rotate()        旋转；循环
scale()         缩放；规模，比例
skew()          倾斜；偏离   英 [skjuː]
matrix()        矩阵  英 ['meɪtrɪks]


1.translate() 方法

根据左边（X轴）和顶部（Y轴）位置给定的参数，从当前元素位置移动。

语法：

div{
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
transform: translate(50px,100px);/*标准的语法（必须放在最后）*/
}
/*translate值（50px，100px）是元素相对于自身的原始位置从左边移动50个像素，并从顶部移动100像素。*/


说明：

translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。


translateX(n)  定义 2D 转换，沿着 X 轴移动元素。


translateY(n)  定义 2D 转换，沿着 Y 轴移动元素。


举例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>translate</title>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid #000;
background-color: #f40;
}
/*沿着 X 和 Y 轴移动元素。*/
#box2{
-webkit-transform:translate(50px,100px);/*Chrome and Safari*/
-ms-transform:translate(50px,100px); /*IE9*/
transform:translate(50px,100px);/*标准语法*/
}
/*沿着 X 轴移动元素。*/
#box3{
-webkit-transform:translateX(500px);/*Chrome and Safari*/
-ms-transform:translateX(500px);/*IE9*/
transform:translateX(500px);/*标准语法*/
}
/*沿着 Y 轴移动元素。*/
#box4{
-webkit-transform:translateY(100px);/*Chrome and Safari*/
-ms-transform:translateY(100px);/*IE9*/
transform: translateY(100px);/*标准语法*/
}
</style>
</head>
<body>
<div id="box1">我是div1</div>
<div id="box2">我是div2</div>
<div id="box3">我是div3</div>
<div id="box4">我是div4</div>
</body>
</html>


效果展示



2.rotate()方法

rotate(angle)
定义 2D 旋转，在参数中规定角度。

正度数，顺时针旋转；

负度数，逆时针旋转；

语法：

div{
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
transform: rotate(30deg);/*标准的语法（必须放在最后）*/
}
/*rotate值（30deg）元素顺时针旋转30度*/


举例：

<
180dc
pre class="prettyprint">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rotate方法</title>
<style>
div{
width: 200px;
height: 100px;
margin-left: 100px;
/*          background-color: violet;
background-color: indigo;*/
background-color: #f40;
}
#box2{
-webkit-transform:rotate(10deg);/*Chrome and Safari*/
-ms-transform:rotate(10deg);/*IE 9*/
transform:rotate(10deg);/*标准语法*/
}
#box3{
-webkit-transform:rotate(30deg);/*Chrome and Safari*/
-ms-transform:rotateX(30deg);/*IE 9*/
transform:rotate(30deg);/*标准语法*/
}
#box4{
-webkit-transform:rotate(60deg);/*Chrome and Safari*/
-ms-transform:rotate(60deg);/*IE 9*/
transform: rotate(60deg);/*标准语法*/
}
#box5{
-webkit-transform:rotate(90deg);/*Chrome and Safari*/
-ms-transform:rotate(90deg);/*IE 9*/
transform: rotate(90deg);/*标准语法*/
}
#box6{
-webkit-transform:rotate(120deg);/*Chrome and Safari*/
-ms-transform:rotate(120deg);/*IE 9*/
transform: rotate(120deg);/*标准语法*/
}
#box7{
-webkit-transform:rotate(150deg);/*Chrome and Safari*/
-ms-transform:rotate(150deg);/*IE 9*/
transform: rotate(150deg);/*标准语法*/
}
#box8{
-webkit-transform:rotate(180deg);/*Chrome and Safari*/
-ms-transform:rotate(180deg);/*IE 9*/
transform: rotate(180deg);/*标准语法*/
}
</style>
</head>
<body>
<div id="box1">我是div1</div>
<div id="box2">我是div2</div>
<div id="box3">我是div3</div>
<div id="box4">我是div4</div>
<div id="box5">我是div5</div>
<div id="box6">我是div6</div>
<div id="box7">我是div7</div>
<div id="box8">我是div8</div>
</body>
</html>


效果展示



3.scale()方法

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

语法：

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

/*scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。*/


说明：

scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。


scaleX(n)  定义 2D 缩放转换，改变元素的宽度。


scaleY(n)  定义 2D 缩放转换，改变元素的高度。


举例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scale方法</title>
<style>
div{
width: 200px;
height: 100px;
margin: 100px auto;
background-color: gold;
}
#box1{
-webkit-transform:scale(2,2);/*Chrome and Safari*/
-ms-transform:scale(2,2);/*IE 9*/
transform:scale(2,2);/*标准语法*/
}
#box2{
-webkit-transform:scaleX(2);/*Chrome and Safari*/
-ms-transform:scaleX(2);/*IE 9*/
transform:scaleX(2);/*标准语法*/
}
#box3{
-webkit-transform:scaleY(2);/*Chrome and Safari*/
-ms-transform:scaleY(2);/*IE 9*/
transform:scaleY(2);/*标准语法*/
}
#box4{
-webkit-transform:scale(1,1);/*Chrome and Safari*/
-ms-transform:scale(1,1);/*IE 9*/
transform:scale(1,1);/*标准语法*/
}
#box5{
-webkit-transform:scale(0.5,0.5);/*Chrome and Safari*/
-ms-transform:scale(0.5,0.5);/*IE 9*/
transform:scale(0.5,0.5);/*标准语法*/
}
</style>
</head>
<body>
<div id="box1">我是div1</div>
<div id="box2">我是div2</div>
<div id="box3">我是div3</div>
<div id="box4">我是div4</div>
<div id="box5">我是div5</div>
</body>
</html>


效果展示



4.skew()方法

语法：

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


说明：

包含两个参数值，分别表示X轴和Y轴倾斜的角度；

如果第二个参数为空，则默认为0；

参数为负，表示向相反方向倾斜。

语法：

div{
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
transform: skew(30deg,20deg);/*标准语法*/
}
/*skew(30deg,20deg) 表示元素在X轴倾斜30度，在Y轴上倾斜20度。*/


说明：

skew(x-angle,y-angle);表示在X轴和Y轴都倾斜。


skewX(<angle>);表示只在X轴(水平方向)倾斜。


skewY(<angle>);表示只在Y轴(垂直方向)倾斜。


举例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>skew</title>
<style>
.wrap{
display: inline-block;
}
div:not(.wrap){
width: 200px;
height: 200px;
display: inline-block;
margin: 120px 80px 10px 50px;
background-color: #e7e9f4;
}
/*X轴倾斜*/
#box1{
-webkit-transform:skewX(0deg);/*Chorme and Safari*/
-ms-transform:skewX(0deg);/*IE 9*/
transform:skewX(0deg);/*标准的语法*/
}
#box2{
-webkit-transform:skewX(10deg);/*Chorme and Safari*/
-ms-transform:skewX(10deg);/*IE 9*/
transform:skewX(10deg);/*标准的语法*/
}
#box3{
-webkit-transform:skewX(20deg);/*Chorme and Safari*/
-ms-transform:skewX(20deg);/*IE 9*/
transform:skewX(20deg);/*标准的语法*/
}
#box4{
-webkit-transform:skewX(30deg);/*Chorme and Safari*/
-ms-transform:skewX(30deg);/*IE 9*/
transform:skewX(30deg);/*标准的语法*/
}
#box5{
-webkit-transform:skewX(40deg);/*Chorme and Safari*/
-ms-transform:skewX(40deg);/*IE 9*/
transform:skewX(40deg);/*标准的语法*/
}
#box6{
-webkit-transform:skewX(50deg);/*Chorme and Safari*/
-ms-transform:skewX(50deg);/*IE 9*/
transform:skewX(50deg);/*标准的语法*/
}
#box7{
-webkit-transform:skewY(0deg);/*Chorme and Safari*/
-ms-transform:skewY(0deg);/*IE 9*/
transform:skewY(0deg);/*标准的语法*/
}
/*Y轴倾斜*/
#box8{
-webkit-transform:skewY(10deg);/*Chorme and Safari*/
-ms-transform:skewY(10deg);/*IE 9*/
transform:skewY(10deg);/*标准的语法*/
}
#box9{
-webkit-transform:skewY(20deg);/*Chorme and Safari*/
-ms-transform:skewY(20deg);/*IE 9*/
transform:skewY(20deg);/*标准的语法*/
}
#box10{
-webkit-transform:skewY(30deg);/*Chorme and Safari*/
-ms-transform:skewY(30deg);/*IE 9*/
transform:skewY(30deg);/*标准的语法*/
}
#box11{
-webkit-transform:skewY(40deg);/*Chorme and Safari*/
-ms-transform:skewY(40deg);/*IE 9*/
transform:skewY(40deg);/*标准的语法*/
}
#box12{
-webkit-transform:skewY(50deg);/*Chorme and Safari*/
-ms-transform:skewY(50deg);/*IE 9*/
transform:skewY(50deg);/*标准的语法*/
}
/*X轴和Y轴同时倾斜*/
#box13{
-webkit-transform:skew(10deg,5deg);/*Chorme and Safari*/
-ms-transform:skew(10deg,5deg);/*IE 9*/
transform:skew(10deg,5deg);/*标准的语法*/
}
#box14{
-webkit-transform:skew(10deg,20deg);/*Chorme and Safari*/
-ms-transform:skew(10deg,20deg);/*IE 9*/
transform:skew(10deg,20deg);/*标准的语法*/
}
</style>
</head>
<body>
<div class="wrap"><div id="box1">我是div1</div></div>
<div class="wrap"><div id="box2">我是div2</div></div>
<div class="wrap"><div id="box3">我是div3</div></div>
<div class="wrap"><div id="box4">我是div4</div></div>
<div class="wrap"><div id="box5">我是div5</div></div>
<div class="wrap"><div id="box6">我是div6</div></div>
<div class="wrap"><div id="box7">我是div7</div></div>
<div class="wrap"><div id="box8">我是div8</div></div>
<div class="wrap"><div id="box9">我是div9</div></div>
<div class="wrap"><div id="box10">我是div10</div></div>
<div class="wrap"><div id="box11">我是div11</div></div>
<div class="wrap"><div id="box12">我是div12</div></div>
<div class="wrap"><div id="box13">我是div13</div></div>
<div class="wrap"><div id="box14">我是div14</div></div>
</body>
</html>


效果展示



5.matrix()方法

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

说明：

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

2. 
matrix(n,n,n,n,n,n)
定义 2D 转换，使用六个值的矩阵。

复习案例示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复习transform</title>
<style>
#box1{
width: 200px;
height: 100px;
position: absolute;
/*position的top:50%;left:50%;是相对于界面宽高的。*/
top:50%;
left:50%;
background-color: #e5d1a4;
/*translate的-50%,-50%是相对于div本身宽高的。*/
/*相当于先将div左上角居中，再将div中心点居中。*/
-webkit-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
#box2{
width: 200px;
height: 100px;
background-color: #a4d6f1;

}
#box2:hover{
-webkit-transform:scale(0.5,1);
-ms-transform:scale(0.5,1);
transform: scale(0.5,1);
}
#box3{
width: 200px;
height: 200px;
background-color: #f5b3e9;
}
#box3:hover{
-webkit-transform:rotate(30deg);
-ms-transform:rotate(30deg);
transform: rotate(30deg);
}
#box4{
width: 200px;
height: 100px;
background-color: #f40;
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform: rotate(90deg);
}
#box5{
width: 200px;
height: 100px;
background-color: #a90;
}
#box6{
width: 200px;
height: 100px;
margin-top: 20px;
background-color: #a90;
}
#box6:hover{
-webkit-transform:skew(20deg);
-ms-transform:skew(20deg);
transform:skew(20deg);
}
#box7{
width: 200px;
height: 100px;
margin-top: 20px;
background-color: #b40;
}
#box7:hover{
-webkit-transform:rotate3d(1,0,0,60deg);
-ms-transform:rotate3d(1,0,0,60deg);
transform:rotate3d(1,0,0,60deg);
}
</style>
</head>
<body>
<ul>CSS转换transform
<li>translate()平移</li>
<li>scale()缩放</li>
<li>rotate()旋转</li>
<li>skew()倾斜</li>
<li>matrix()矩阵</li>
</ul>
<div id="box1">我是div1</div>
<div id="box2">我是div2</div>
<div id="box3">我是div3</div>
<div id="box4">我是div4</div>
<div id="box5">我是div5</div>
<div id="box6">我是div6</div>
<div id="box7">我是div7</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航