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

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

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

一、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>

相關閱讀
把以前的做的個人網站程序提供下載,程序大了點,不過全
復選框添加,刪除信息,過濾重復
在DIV+CSS里面IE5.5的專用標簽
要想創業成功必讀的 36 條鐵律
ASP實現不打開直接下載txt,jpg...類文件
中小企業網站優化存在的弊病
table表格詳解,了解表格不為人知的屬性,標準化你的表格
判斷輸入字符串中是否含有危險字符
共有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把網頁文字的毛邊去掉
更多>>最新添加文章
python里面requests.post返回的res.text還有其它的嗎
aliyun阿里云續費域名優惠口令(注冊、續費都可以使用)
windows7環境下安裝配置jdk
python對微信操作要用到這兩個庫wxpy與itchat
ASP中Utf-8與Gb2312編碼轉換亂碼問題的解決方法頁面編碼聲明
DW設置之后更好用 DreamweaverCS編輯GB2312與UTF-8文件在代碼視圖中點擊鼠標錯位問題的解決辦法
解決國內 github.com 打不開的準確方法
8種Python字符串拼接的方法,你知道幾種
更多>>隨機抽取信息
asp防止多個后臺用戶同時登陸
深山旅行社網站管理系統5.0發布
深山留言板警察出動效果
jquery實現移動端下拉加載刷新更多信息
微軟公司的三道面試題目看了會有意想不到的收獲
一些平時用到HTML的過濾
日韩gv国产gv欧美旡码|伊人久久大香线AV五月天|亚洲精品无码永久在线|亚洲第一页自拍1414