|
|
|
|
|
|
贊助商
分類(lèi)目錄
贊助商
最新文章
搜索
實(shí)例分析CSS3 transform: translateY() rotate() rotateY() rotateX()
作者:admin 時(shí)間:2022-3-15 17:42:45 瀏覽:CSS3動(dòng)畫(huà)屬性transform，在上一文中，我們學(xué)習(xí)了《transform: scale() 縮放轉(zhuǎn)換》，本文將通過(guò)一個(gè)實(shí)例來(lái)分析如何使用其他的動(dòng)畫(huà)屬性，如表示平移的translateY()， translateX()等，也有表示旋轉(zhuǎn)的rotate()， rotateY()， rotateX()等。
transform: rotate() 旋轉(zhuǎn)
實(shí)例說(shuō)明
當(dāng)鼠標(biāo)移到圖片上時(shí)，文字以旋轉(zhuǎn)的方式出現(xiàn)；當(dāng)鼠標(biāo)移開(kāi)時(shí)，文字同樣以旋轉(zhuǎn)的方式消失，而旋轉(zhuǎn)的方向與出現(xiàn)時(shí)相反。
完整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;
/*
* 定義初始狀態(tài)的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;
/*
* 定義變換后的狀態(tài)
*/
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>少年初成長(zhǎng)</p>
</div>
</body>
</html>
代碼分析
先看html代碼。
圖片盒子是一個(gè)DIV標(biāo)簽，其id值是pic。
DIV標(biāo)簽里有一個(gè)p標(biāo)簽，p標(biāo)簽內(nèi)是文字內(nèi)容。
再看CSS代碼。
CSS代碼我們主要看一個(gè)動(dòng)畫(huà)屬性transform。#pic p {}是默認(rèn)狀態(tài)，而#pic:hover p {}是鼠標(biāo)懸停時(shí)的狀態(tài)。
默認(rèn)狀態(tài)時(shí)
transform: translateY(-253px) rotate(130deg) rotateY(-270deg) rotateX(100deg) scale(0.5, 0.5);
鼠標(biāo)懸停時(shí)
transform: translateY(-253px) rotate(0deg) rotateY(0deg) rotateX(0deg) scale(1, 1);
這里我們只需理解幾個(gè)屬性的含義，translateY()， rotate()等，下面逐一介紹。
transform屬性：2D位置移動(dòng)
1.translate(x,y)
定義：
基于原來(lái)的位置，沿X軸平移，長(zhǎng)度為x，沿Y軸平移，長(zhǎng)度為y。
語(yǔ)法：
transform：translate(x,y);
2.translateX(x)
定義：
基于原來(lái)的位置，沿X軸平移，長(zhǎng)度為x。
語(yǔ)法：
transform：translateX(x);
3.translateY(y)
定義：
基于原來(lái)的位置,沿Y軸平移，長(zhǎng)度為y。
語(yǔ)法：
transform：translateY(y);
transform屬性：3D位置移動(dòng)
1.translate3d(x,y,z)
定義：
基于原來(lái)的位置,沿X軸平移，長(zhǎng)度為x,沿Y軸平移，長(zhǎng)度為y,沿Z軸平移，長(zhǎng)度為z。
語(yǔ)法：
transform：translate3d(x,y,z);
2.translateZ(z)
定義：
基于原來(lái)的位置,沿Z軸平移，長(zhǎng)度為z。
語(yǔ)法：
transform：translateZ(z);
transform屬性：2D旋轉(zhuǎn)
1.rotate(angle)
定義：
以圖形的幾何中心點(diǎn)為旋轉(zhuǎn)中心，順時(shí)針旋轉(zhuǎn)角度為angle。
語(yǔ)法：
transform：rotate(angle);
2.rotateX(x)
定義：
繞X軸方向旋轉(zhuǎn)，順時(shí)針旋轉(zhuǎn)角度為angle。
語(yǔ)法：
transform：rotateX(x);
3.rotateZ(z)
定義：
繞Y軸方向旋轉(zhuǎn)，順時(shí)針旋轉(zhuǎn)角度為angle。
語(yǔ)法：
transform：rotateZ(z);
transform屬性：3D旋轉(zhuǎn)
1.rotate3d(x,y,z,angle)
定義：
同時(shí)繞X,Y,Z軸三個(gè)方向旋轉(zhuǎn)，順時(shí)針旋轉(zhuǎn)角度為angle。
語(yǔ)法：
transform：rotate3d(x,y,z,angle);
2.rotateZ(z)
定義：
繞Z軸方向旋轉(zhuǎn)，順時(shí)針旋轉(zhuǎn)角度為angle。
語(yǔ)法：
transform：rotateZ(z);
您可能對(duì)以下文章也感興趣
- CSS3 transform: scale() 縮放轉(zhuǎn)換【實(shí)例分析演示】
- 純CSS實(shí)現(xiàn)的星光動(dòng)畫(huà)背景
- 8款CSS動(dòng)畫(huà)背景(飛揚(yáng)文字/旋轉(zhuǎn)方塊/粒子動(dòng)畫(huà)/彩色水滴。。。)
- 5款CSS動(dòng)畫(huà)背景(滑動(dòng)對(duì)角線(xiàn)/圖案無(wú)限滾動(dòng)/灰度三角形/閃爍星星)
- CSS動(dòng)畫(huà)背景-流星雨效果
- css滾動(dòng)星星效果/星空動(dòng)畫(huà)背景
- CSS粒子動(dòng)畫(huà)背景
- CSS動(dòng)畫(huà)背景-對(duì)角線(xiàn)顏色漸變
標(biāo)簽: transform translateY rotate rotateY rotateX 動(dòng)畫(huà)
