利用css中的scale()實(shí)現放大縮小效果
一、scale()方法
縮放,指的是“縮小”和“放大”。在CSS3中,我們可以使用scale()方法來(lái)將元素根據中心原點(diǎn)進(jìn)行縮放。
跟translate()方法一樣,縮放scale()方法也有3種情況:
(1)scaleX(x):元素僅水平方向縮放(X軸縮放);
(2)scaleY(y):元素僅垂直方向縮放(Y軸縮放);
(3)scale(x,y):元素水平方向和垂直方向同時(shí)縮放(X軸和Y軸同時(shí)縮放);
1、scaleX(x)語(yǔ)法:transform:scaleX(x)
說(shuō)明:x表示元素沿著(zhù)水平方向(X軸)縮放的倍數,如果大于1就代表放大;如果小于1就代表縮小。
2、scaleY(y)語(yǔ)法:transform:scaleY(y)
說(shuō)明:y表示元素沿著(zhù)垂直方向(Y軸)縮放的倍數,如果大于1就代表放大;如果小于1就代表縮小。
3、scale(x,y)
語(yǔ)法:transform:scale(x,y)
說(shuō)明:
x表示元素沿著(zhù)水平方向(X軸)縮放的倍數,y表示元素沿著(zhù)垂直方向(Y軸)縮放的倍數。
注意,Y是一個(gè)可選參數,如果沒(méi)有設置Y值,則表示X、Y兩個(gè)方向的縮放倍數是一樣的(同時(shí)放大相同倍數)。
示例:
transform:scaleY (1.5);
-webkit-transform:scaleY(1.5); /*兼容-webkit-引擎瀏覽器*/
-moz-transform:scaleY(1.5); /*兼容-moz-引擎瀏覽器*/
#a {width:100px;height:100px;background:red;margin:100px;transition:all 1s ease-out;}
#a:hover {transform:scale(2);}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3縮放scale()示例代碼</title>
<style type="text/css">
/*設置原始元素樣式*/
#origin
{
margin:100px auto;/*水平居中*/
width:200px;
height:100px;
border:1px dashed gray;
transition:all 1s ease-out; /* 縮放慢慢動(dòng)作效果 */
}
/*設置當前元素樣式*/
#current
{
width:200px;
height:100px;
color:white;
background-color: #3EDFF4;
text-align:center;
transform:scaleX(1.5);
-webkit-transform:scaleX(1.5); /*兼容-webkit-引擎瀏覽器*/
-moz-transform:scaleX(1.5); /*兼容-moz-引擎瀏覽器*/
}
</style>
</head>
<body>
<div id="origin">
<div id="current"></div>
</div>
</body>
</html>
- 相關(guān)閱讀
- 你們負責對網(wǎng)站的后期推廣嗎?
- canvas繪制的文字如何換行
- 關(guān)于SQL2008 “不允許保存更改。您所做的更改要求刪除并重新創(chuàng )建以下表。您對無(wú)法重新創(chuàng )建的標進(jìn)行了更改或者啟用了‘阻止保存要求重新創(chuàng )建表的更改’” 解決方案
- 網(wǎng)站需要SEO 基本的SEO建站要點(diǎn)
- 中小企業(yè)網(wǎng)站優(yōu)化存在的弊病
- 北京泓源萬(wàn)國咨詢(xún)服務(wù)有限公司
- 關(guān)于字體在CSS中處理效果的思考
- asp利用正則檢查手機端的瀏覽器標識來(lái)確定是否是手機訪(fǎng)問(wèn) 如果是手機訪(fǎng)問(wèn)就使用手機模板
- 共有0條關(guān)于《利用css中的scale()實(shí)現放大縮小效果》的評論
- 發(fā)表評論
呢 稱(chēng): | |
表 情: | |
內 容: |
評論內容:不能超過(guò) 1000 字,需審核,請自覺(jué)遵守互聯(lián)網(wǎng)相關(guān)政策法規。 |
驗證碼: | |
您發(fā)布的評論即表示同意遵守以下條款:
一、不得利用本站危害國家安全、泄露國家秘密,不得侵犯國家、社會(huì )、集體和公民的合法權益;
二、不得發(fā)布國家法律、法規明令禁止的內容;互相尊重,對自己在本站的言論和行為負責;
三、本站對您所發(fā)布內容擁有處置權。
- 更多信息>>欄目類(lèi)別選擇
- 百度小程序開(kāi)發(fā)
- 微信小程序開(kāi)發(fā)
- 微信公眾號開(kāi)發(fā)
- uni-app
- asp函數庫
- ASP
- DIV+CSS
- HTML
- python
- 更多>>同類(lèi)信息
- jquery設置或獲取修改classname
- 利用css3.0寫(xiě)出一個(gè)音樂(lè )播放的唱片碟盤(pán)的效果
- 利用css中的scale()實(shí)現放大縮小效果
- 利用background-color:#000000a8在背景顏色16進(jìn)制代碼之后加字母加上數字讓背景色透明
- css背景使用base64編碼或者將base64編碼放在img圖片標簽中
- 利用css3中的-webkit-font-smoothing把網(wǎng)頁(yè)文字的毛邊去掉
- 更多>>最新添加文章
- 抖音直播音掛載小雪花 懂車(chē)帝小程序
- javascript獲取瀏覽器指紋可以用來(lái)做投票
- 火狐Mozilla Firefox出現:無(wú)法載入您的Firefox配置文件 它可能已經(jīng)丟失 或是無(wú)法訪(fǎng)問(wèn) 問(wèn)題解決集合處理辦法
- 在A(yíng)ndroid、iOS、Windows、MacOS中微信小程序的文件存放路徑
- python通過(guò)代碼修改pip下載源讓下載庫飛起
- python里面requests.post返回的res.text還有其它的嗎
- aliyun阿里云續費域名優(yōu)惠口令(注冊、續費都可以使用)
- windows7環(huán)境下安裝配置jdk