css3通过scale（）、rotate（）实现放⼤、旋转⼀、scale()⽅法
缩放，指的是“缩⼩”和“放⼤”。在CSS3中，我们可以使⽤scale()⽅法来将元素根据中⼼原点进⾏缩放。
跟translate()⽅法⼀样，缩放scale()⽅法也有3种情况：
（1）scaleX(x)：元素仅⽔平⽅向缩放（X轴缩放）；
（2）scaleY(y)：元素仅垂直⽅向缩放（Y轴缩放）；
（3）scale(x,y)：元素⽔平⽅向和垂直⽅向同时缩放（X轴和Y轴同时缩放）；
1、scaleX(x)
语法：
transform:scaleX(x)
说明：
x表⽰元素沿着⽔平⽅向（X轴）缩放的倍数，如果⼤于1就代表放⼤；如果⼩于1就代表缩⼩。
⼤家想想倍数是怎样⼀个概念就很好理解了。
2、scaleY(y)
语法：
transform:scaleY(y)
说明：
y表⽰元素沿着垂直⽅向（Y轴）缩放的倍数，如果⼤于1就代表放⼤；如果⼩于1就代表缩⼩。
3、scale(x,y)
语法：
transform:scale(x,y)
说明：
x表⽰元素沿着⽔平⽅向（X轴）缩放的倍数，y表⽰元素沿着垂直⽅向（Y轴）缩放的倍数。
注意，Y是⼀个可选参数，如果没有设置Y值，则表⽰X、Y两个⽅向的缩放倍数是⼀样的（同时放⼤相同倍数）。举例：
<!DOCTYPE html>
<html xmlns="/1999/xhtml">
<head>
<title>CSS3缩放scale()⽤法</title>
<style type="text/css">
/*设置原始元素样式*/
.main
{
margin:100px auto;/*⽔平居中*/
width:300px;
height:200px;
border:1px dashed gray;
}
/*设置当前元素样式*/
#jb51
{
width:300px;
height:200px;
color:white;
background-color: #3EDFF4;
text-align:center;
transform:scaleX(1.5);
-webkit-transform:scaleX(1.5);  /*兼容-webkit-引擎浏览器*/
-moz-transform:scaleX(1.5);    /*兼容-moz-引擎浏览器*/
}
/*普通⽅便对⽐*/
#jbzj
{
width:300px;
height:200px;
color:white;
background-color: #3EDFF4;
text-align:center;
}
</style>
</head>
<body>
<div class="main">
<div id="jb51">1</div>
</div>
<div class="main">
<div id="jbzj">2</div>
</div>
</body>
</html>
在chrome浏览器预览效果如下：
分析：
从上图可以看出，元素沿着X轴⽅向放⼤了1.5倍（两个⽅向同时延伸，整体放⼤1.5倍）。
transform:scaleY (1.5);
-webkit-transform:scaleY(1.5); /*兼容-webkit-引擎浏览器*/
-moz-transform:scaleY(1.5); /*兼容-moz-引擎浏览器*/
当使⽤上⾯代码时，在浏览器预览效果如下：
css3通过scale()实现放⼤功能
通过rotate()实现旋转功能
旋转rotate()函数通过指定的⾓度参数使元素相对原点进⾏旋转。它主要在⼆维空间内进⾏操作，设置⼀个⾓度值，⽤来指定旋转的幅度。如果这个值为正值，元素相对原点中⼼顺时针旋转；如果这个值为负值，元素相对原点中⼼逆时针旋转。如下图所⽰：
HTML代码：
<div class="wrapper">
<div></div>
</div>
CSS代码：
.wrapper {
width: 200px;
height: 200px;
border: 1px dotted red;
margin: 100px auto;
}
css实现垂直水平居中
.wrapper div {
width: 200px;
height: 200px;
background: orange;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
演⽰结果
⽽transition则可设置元素变化所需的时间
html中的结构代码
<ul>
<li><img src="image/1.jpg" ></li>
<li><img src="image/2.jpg" ></li>
<li><img src="image/3.jpg" ></li>
</ul>
css3样式
ul{
margin-top:50px;
list-style:none;
}
ul li{
width:200px;
height:150px;
float:left;
margin-left:10px;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-o-transition:all 1s;
}
ul li:hover{
-webkit-transform:scale(1.5) rotate(10deg);
-moz-transform:scale(1.5) rotate(10deg);
-o-transform:scale(1.5) rotate(10deg);
}
li img{
width:100%;
height:100%;
}
以上就是css3通过scale()、rotate()实现放⼤、旋转的详细内容，更多关于css3放⼤、旋转的资料请关注其它相关⽂章！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。