|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
CSS3 transform: scale() 縮放轉(zhuǎn)換【實例分析演示】
作者:admin 時間:2022-3-15 16:18:19 瀏覽:CSS3中有個transform: scale()的屬性，這是一個縮放轉(zhuǎn)換屬性。scale()又分為scale(x,y) ，scaleX(x) ，scaleY(y) ，它們都是2D縮放轉(zhuǎn)換屬性。此外，還有scale3d(x,y,z) ，scaleZ(z) ，這些是3D縮放轉(zhuǎn)換。
本文將介紹transform: scale()一個簡單的縮放實例。
transform: scale() 縮放轉(zhuǎn)換
完整HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#pic {
width: 200px;
height: 250px;
border: 1px 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: 200px;
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;
}
</style>
</head>
<body>
<div id="pic">
<img src="1.jpg" width="200" height="250" />
<p>恰好是少年</p>
</div>
</body>
</html>
代碼功能
當鼠標移到圖片上時，圖片放大，底部滑入文字；當鼠標移開圖片時，圖片縮小恢復到原圖，底部文字滑出。
代碼分析
圖片盒子是一個DIV標簽，其id值是pic。
p標簽是位于圖片底部的文字內(nèi)容。p標簽默認隱藏。
#pic:hover img { } 設置圖片鼠標懸停時的變化，這里實例用了下面兩行代碼：
transform: scale(1.5, 1.5);
transition: all 2s;
transform: scale(1.5, 1.5);的意思是圖片高和寬均放大1.5倍；而transition: all 2s;的意思是動畫時間為2s。
我們可以嘗試改變scale(x,y)的值，比如改為scale(1,2)或scale(2,1)，看看效果如何。
我們還可以改為scaleX(x)或scaleY(y)這樣的縮放屬性，看看各種不同的效果，以便更能理解其中的含義。
transform屬性：2D縮放轉(zhuǎn)換
1.scale(x,y)
定義：
基于原來的位置進行伸縮變換，其中x代表沿X軸的伸縮倍數(shù)，y代表沿Y軸的伸縮倍數(shù)。
語法：
transform：scale(x,y);
2.scaleX(x)
定義：
基于原來的位置進行伸縮變換，其中x代表沿X軸的伸縮倍數(shù)。
語法：
transform：scale(x);
3.scaleY(y)
定義：
基于原來的位置進行伸縮變換，其中y代表沿Y軸的伸縮倍數(shù)。
語法：
transform：scale(y);
transform屬性：3D縮放轉(zhuǎn)換
1.scale3d(x,y,z)
定義：
基于原來的位置進行伸縮變換，其中x代表沿X軸的伸縮倍數(shù)，y代表沿Y軸的伸縮倍數(shù)，z代表沿Z軸的伸縮倍數(shù)。
語法：
transform：scale3d(x,y,z);
2.scaleZ(z)
定義：
基于原來的位置進行伸縮變換，其中z代表沿Z軸的伸縮倍數(shù)。
語法：
transform：scaleZ(z);
您可能對以下文章也感興趣
- 站長推薦
