|
|
|
|
|
|
實例分析CSS3 transform: translateY() rotate() rotateY() rotateX()
作者:admin 時間:2022-3-15 17:42:45 瀏覽:CSS3動畫屬性transform，在上一文中，我們學習了《transform: scale() 縮放轉換》，本文將通過一個實例來分析如何使用其他的動畫屬性，如表示平移的translateY()， translateX()等，也有表示旋轉的rotate()， rotateY()， rotateX()等。
transform: rotate() 旋轉
實例說明
當鼠標移到圖片上時，文字以旋轉的方式出現；當鼠標移開時，文字同樣以旋轉的方式消失，而旋轉的方向與出現時相反。
完整HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#pic {
width: 200px;
height: 250px;
margin: 100px auto;
border: 2px solid gainsboro;
box-shadow: 0 0 8px darkgray;
position: relative;
}
#pic p {
width: 200px;
height: 250px;
background: whitesmoke;
text-align: center;
line-height: 250px;
font-family: "微軟雅黑";
opacity: 0;
/*
* 定義初始狀態的transform屬性
* transition定義變換屬性和周期，此處為所有屬性，周期2s
*/
transform: translateY(-253px) rotate(130deg) rotateY(-270deg) rotateX(100deg) scale(0.5, 0.5);
transition: all 2s;
}
#pic:hover p {
opacity: 1;
/*
* 定義變換后的狀態
*/
transform: translateY(-253px) rotate(0deg) rotateY(0deg) rotateX(0deg) scale(1, 1);
}
</style>
</head>
<body>
<div id="pic">
<img src="1.jpg" width="200" height="250" />
<p>少年初成長</p>
</div>
</body>
</html>
代碼分析
先看html代碼。
圖片盒子是一個DIV標簽，其id值是pic。
DIV標簽里有一個p標簽，p標簽內是文字內容。
再看CSS代碼。
CSS代碼我們主要看一個動畫屬性transform。#pic p {}是默認狀態，而#pic:hover p {}是鼠標懸停時的狀態。
默認狀態時
transform: translateY(-253px) rotate(130deg) rotateY(-270deg) rotateX(100deg) scale(0.5, 0.5);
鼠標懸停時
transform: translateY(-253px) rotate(0deg) rotateY(0deg) rotateX(0deg) scale(1, 1);
這里我們只需理解幾個屬性的含義，translateY()， rotate()等，下面逐一介紹。
transform屬性：2D位置移動
1.translate(x,y)
定義：
基于原來的位置，沿X軸平移，長度為x，沿Y軸平移，長度為y。
語法：
transform：translate(x,y);
2.translateX(x)
定義：
基于原來的位置，沿X軸平移，長度為x。
語法：
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.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);
您可能對以下文章也感興趣
