css3動畫-transform屬性
transform屬性向元素應用2D或3D轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜
transform屬性---2D位置移動
1.translate(x,y) 定義： 基於原來的位置，沿X軸平移，長度為x，沿Y軸平移，長度為y 語法： transform：translate(x,y);
transform：translateX(x);
3.translateY(y) 定義： 基於原來的位置,沿Y軸平移，長度為y 語法：transform：translateY(y);
transform屬性---3D位置移動
1.translate3d(x,y,z) 定義： 基於原來的位置,沿X軸平移，長度為x,沿Y軸平移，長度為y,沿Z軸平移，長度為z 語法：transform：translate3d(x,y,z);
2.translateZ(z) 定義： 基於原來的位置,沿Z軸平移，長度為z 語法：transform：translateZ(z);
transform屬性---2D縮放轉換
1.scale(x,y) 定義： 基於原來的位置進行伸縮變換，其中x代表沿X軸的伸縮倍數語法：
transform：scale(x,y);
2.scaleX(x) 定義： 基於原來的位置進行伸縮變換，其中x代表沿X軸的伸縮倍數語法：
transform：scale(x);
3.scaleY(y) 定義： 基於原來的位置進行伸縮變換，其中y代表沿Y軸的伸縮倍數語法：
transform：scale(y);
transform屬性---3D縮放轉換
1.scale3d(x,y,z) 定義： 基於原來的位置進行伸縮變換，其中x代表沿X軸的伸縮倍數，y代表沿Y軸的伸縮倍數，z代表沿Z軸的伸縮倍數語法：
transform：scale3d(x,y,z);
2.scaleZ(z) 定義： 基於原來的位置進行伸縮變換，其中z代表沿Z軸的伸縮倍數語法：
transform：scaleZ(z);
transform屬性---2D旋轉
1.rotate(angle) 定義： 以圖形的幾何中心點為旋轉中心，順時針旋轉角度為angle語法：
transform：rotate(angle);
2.rotateX(x)
定義： 繞X軸方向旋轉，順時針旋轉角度為angle語法：
transform：rotateX(x);
3.rotateZ(z) 定義： 繞Y軸方向旋轉，順時針旋轉角度為angle語法：
transform：rotateZ(z);
transform屬性---3D旋轉
1.rotate3d(x,y,z,angle) 定義： 同時繞X,Y,Z軸三個方向旋轉，順時針旋轉角度為angle
語法：
transform：rotate3d(x,y,z,angle);
2.rotateZ(z) 定義： 繞Z軸方向旋轉，順時針旋轉角度為angle語法：
transform：rotateZ(z);
例項演示1
html檔案
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<div id="pic">
<img src="img/6.jpg" width="212" height="300"/>
<p>像少年啦飛馳</p>
</div>
</body>
</html>
css檔案
*{
margin: 0;
padding: 0;
}
#pic{
width: 212px;
height: 300px;
margin: 100px auto;
border: 2px solid gainsboro;
box-shadow: 0 0 8px darkgray;
position: relative;
}
#pic p{
width: 212px;
height: 300px;
background: whitesmoke;
text-align: center;
line-height: 300px;
font-family: "微軟雅黑";
opacity: 0;
/*
* 定義初始狀態的transform屬性
* transition定義變換屬性和週期，此處為所有屬性，週期2s
*/
transform: translateY(-303px) rotate(130deg) rotateY(-270deg) rotateX(100deg) scale(0.5,0.5);
transition: all 2s;
}
#pic:hover p{
opacity: 1;
/*
* 定義變換後的狀態
*/
transform: translateY(-303px) rotate(0deg) rotateY(0deg) rotateX(0deg) scale(1,1);
}
例項演示2
html檔案
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<div id="pic">
<img src="img/6.jpg" width="212" height="300"/>
<p>我的世界就如一座城池</p>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
#pic{
width: 212px;
height: 300px;
border: 5px solid whitesmoke;
box-shadow: 0 0 0 8px pink;
margin: 100px auto;
overflow:hidden;
position: relative;
}
#pic:hover img{
transform: scale(1.5,1.5);
transition: all 2s;
}
#pic p{
width: 212px;
height: 20px;
background: black;
opacity: 0.5;
position: absolute;
bottom: -20px;
color: white;
font-family: "微軟雅黑";
font-size: 13px;
text-align: center;
}
#pic:hover p{
bottom: 0px;
transition: bottom 1s;
}