訂閱本欄目 RSS您所在的位置: 深山工作室 > DIV+CSS > 正文

利用css中的scale()實現放大縮小效果

2020/11/5 13:32:29 字體: 瀏覽 13388

一、scale()方法
縮放,指的是“縮小”和“放大”。在CSS3中,我們可以使用scale()方法來將元素根據中心原點進行縮放。
跟translate()方法一樣,縮放scale()方法也有3種情況:
(1)scaleX(x):元素僅水平方向縮放(X軸縮放);
(2)scaleY(y):元素僅垂直方向縮放(Y軸縮放);
(3)scale(x,y):元素水平方向和垂直方向同時縮放(X軸和Y軸同時縮放);

1、scaleX(x)語法:transform:scaleX(x)
說明:x表示元素沿著水平方向(X軸)縮放的倍數,如果大于1就代表放大;如果小于1就代表縮小。

2、scaleY(y)語法:transform:scaleY(y)
說明:y表示元素沿著垂直方向(Y軸)縮放的倍數,如果大于1就代表放大;如果小于1就代表縮小。

3、scale(x,y)
語法:transform:scale(x,y)
說明:
x表示元素沿著水平方向(X軸)縮放的倍數,y表示元素沿著垂直方向(Y軸)縮放的倍數。
注意,Y是一個可選參數,如果沒有設置Y值,則表示X、Y兩個方向的縮放倍數是一樣的(同時放大相同倍數)。



示例:
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; /* 縮放慢慢動作效果 */
        }
        /*設置當前元素樣式*/
        #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>

相關閱讀
更變態的頁面右擊失效代碼,選擇,全選,全部失效
一些平時用到HTML的過濾
ASP 格式化顯示時間為幾個月,幾天前,幾小時前,幾分鐘前,或幾秒前
長春海外旅游有限責任公司
簡單Asp圖片驗證碼,收集大概35種各種各樣圖片樣式驗證碼,還有語音驗證碼
微信小程序打開客服提示:該小程序提供的服務出現故障,請稍后重試
了解html基礎知識之html標簽集合
青島景色旅程
共有0條關于《利用css中的scale()實現放大縮小效果》的評論
發表評論
正在加載評論......
返回頂部發表評論
呢 稱:
表 情:
內 容:
評論內容:不能超過 1000 字,需審核,請自覺遵守互聯網相關政策法規。
驗證碼: 驗證碼 
網友評論聲明,請自覺遵守互聯網相關政策法規。

您發布的評論即表示同意遵守以下條款:
一、不得利用本站危害國家安全、泄露國家秘密,不得侵犯國家、社會、集體和公民的合法權益;
二、不得發布國家法律、法規明令禁止的內容;互相尊重,對自己在本站的言論和行為負責;
三、本站對您所發布內容擁有處置權。

更多信息>>欄目類別選擇
百度小程序開發
微信小程序開發
微信公眾號開發
uni-app
asp函數庫
ASP
DIV+CSS
HTML
python
更多>>同類信息
jquery設置或獲取修改classname
利用css3.0寫出一個音樂播放的唱片碟盤的效果
利用css中的scale()實現放大縮小效果
利用background-color:#000000a8在背景顏色16進制代碼之后加字母加上數字讓背景色透明
css背景使用base64編碼或者將base64編碼放在img圖片標簽中
利用css3中的-webkit-font-smoothing把網頁文字的毛邊去掉
更多>>最新添加文章
在Android、iOS、Windows、MacOS中微信小程序的文件存放路徑
python通過代碼修改pip下載源讓下載庫飛起
python里面requests.post返回的res.text還有其它的嗎
aliyun阿里云續費域名優惠口令(注冊、續費都可以使用)
windows7環境下安裝配置jdk
python對微信操作要用到這兩個庫wxpy與itchat
ASP中Utf-8與Gb2312編碼轉換亂碼問題的解決方法頁面編碼聲明
DW設置之后更好用 DreamweaverCS編輯GB2312與UTF-8文件在代碼視圖中點擊鼠標錯位問題的解決辦法
更多>>隨機抽取信息
asp中利用split,instr組合去除二維數組中重復項
偏重于汽車租賃服務商建站解決方案
python+appium自動化測試-滑動
asp導出內容到excel表并自定義命名后下載(非打開)
旅行社網站模板默認風格2
蒸汽消音器
日韩gv国产gv欧美旡码|伊人久久大香线AV五月天|亚洲精品无码永久在线|亚洲第一页自拍1414