實例1：transform：rotate（）旋轉變換
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform:rotate()</title>
<style>
body{
height:400px;
border:solid 1px #000;
}
.box{
width:100px;
height:100px;
background:red;
margin:100px auto 0;
transition: 2s;
}
body:hover .box{
-Webkit-transform:rotate(30deg);/*順時針旋轉30度*/
}
</style>
</head>
<body>
<div class="box">111</div><!-- 文字一同旋轉 -->
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform:skewX()</title>
<style>
body{
height:400px;
border:solid 1px #000;
}
.box{
width:100px;
height:100px;
background:red;
margin:100px auto 0;
transition: 2s;
}
body:hover .box{
-Webkit-transform:skewX(15deg);/*底邊水平向右移動，改變左邊與Y軸夾角15deg*/
}
</style>
</head>
<body>
<div class="box">
skew()
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform:skewY()</title>
<style>
body{
height:400px;
border:solid 1px #000;
}
.box{
width:100px;
height:100px;
background:red;
margin:100px auto 0;
transition: 2s;
}
body:hover .box{
-Webkit-transform:skewY(15deg);/*左邊水平向上移動，改變底邊與X軸夾角15deg*/
}
</style>
</head>
<body>
<div class="box">
skew()
</div>
</body>
</html> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform:skew(X,Y)</title>
<style>
body{
height:400px;
border:solid 1px #000;
}
.box{
width:100px;
height:100px;
background:red;
margin:100px auto 0;
transition: 2s;
}
body:hover .box{
-Webkit-transform:skew(15deg,30deg);/*左邊與Y軸夾角15deg，底邊與X軸夾角30deg*/
}
</style>
</head>
<body>
<div class="box">
skew()
</div>
</body>
</html> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform:scale(X,Y)</title>
<style>
body{
height:400px;
border:solid 1px #000;
}
div[class^='box']{
width:100px;
height:100px;
background:red;
margin:100px ;
transition: 2s;
float: left;
font:50px/100px "宋體";
text-align:center;
}
body:hover .box1{
-Webkit-transform:scale(0.5);/*小於1縮小*/
}
body:hover .box2{
-Webkit-transform:scale(2);/*大於1放大*/
}
div:nth-child(even){
color:rgba(255,255,255,1);
}
div:nth-child(odd){
color:rgba(0,0,0,1);
}
</style>
</head>
<body>
<div class="box1">
縮小
</div>
<div class="box2">
放大
</div>
<div class="box1">
縮小
</div>
<div class="box2">
放大
</div>
</body>
</html> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform:translate(X,Y)</title>
<style>
body{
height:400px;
border:solid 1px #000;
}
.box{
width:100px;
height:100px;
background:red;
margin:100px auto 0;
transition: 2s;
font:50px/100px "宋體";
color:#fff;
text-align:center;
}
body:hover .box{
-Webkit-transform:translate(100px);
/*transform:translateX(正數爲從左往右 負數爲從右往左);
transform:translateY(正數爲從上往下 負數爲從下往上);*/
}
</style>
</head>
<body>
<div class="box">
位移
</div>
</body>
</html> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform-origin:</title>
<style>
body{
height:400px;
border:solid 1px #000;
}
.box{
height:100px;
width: 100px;
background:red;
margin:100px auto;
transition:5s;
-Webkit-transform-origin:right bottom;/*如果設置的兩個值都是0，則圍繞左上角旋轉*/
}
body:hover .box{
-Webkit-transform:rotate(360deg) scale(0);
}
</style>
</head>
<body>
<div class="box">
轉呀轉
</div>
</body>
</html>總結：
transform：rotate（角度）順時針 單位deg
transform：skew（斜切X，斜切Y）單位deg
：skewX（斜切X）
：skewY（斜切Y）
transform：scale（縮放X，縮放Y）無單位(>1放大/<1縮小)
：scaleX（縮放X）
：scaleY（縮放Y）
transform：translate（位移X，位移Y）單位px 若只寫一個值谷歌瀏覽器默認爲水平移動，豎直方向不動
：translateX（位移X）
：translateY（位移Y）
X正值：從左至右，負值：從右至左
Y正值：從上至下，負值：從下至上
transform-origin（X，Y） 單位em、px、%、left、center......
1、top left | left top 等價於 0 0 | 0% 0%
2、top | top center | center top 等價於 50% 0
3、right top | top right 等價於 100% 0
4、left | left center | center left 等價於 0 50% | 0% 50%
5、center | center center 等價於 50% 50%（默認值）
6、right | right center | center right 等價於 100% 50%
7、bottom left | left bottom 等價於 0 100% | 0% 100%
8、bottom | bottom center | center bottom 等價於 50% 100%
9、bottom right | right bottom 等價於 100% 100%
transform：rotate（角度）skew（斜切X，斜切Y）scale（縮放X，縮放Y）translate（位移X，位移Y）；取值從從面的屬性開始計算。
