首頁 > web前端 > css教學 > css怎麼縮放旋轉

css怎麼縮放旋轉

WBOY
發布: 2021-12-03 10:04:00
原創
3165 人瀏覽過

在css中,可以利用transform屬性實作元素的旋轉與縮放效果,語法為「元素{transform:scale(橫向縮放值,垂直縮放值);transform:rotate(旋轉角度值); }」。

css怎麼縮放旋轉

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

css怎麼縮放旋轉

在css中可以利用transform屬性來設定元素的縮放和旋轉,該屬性的作用就是對元素進行旋轉、縮放、移動或傾斜操作。

1、縮放

當transform的值為scale()時,可以對元素進行縮放操作,範例如下:

<!DOCTYPE html>
<html>
<head>
<style> 
div
{margin:30px;
width:200px;
height:100px;
background-color:yellow;
transform:scale(0.5,0.5);
}
</style>
</head>
<body>
<div>Hello World</div>
</body>
</html>
登入後複製

輸出結果:

css怎麼縮放旋轉

2、旋轉

#當transform的值為rotate()時,可以設定元素旋轉操作,範例如下:

<!DOCTYPE html>
<html>
<head>
<style> 
div{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
transform:rotate(9deg);
}
</style>
</head>
<body>
<div>Hello World</div>
</body>
</html>
登入後複製

輸出結果:

css怎麼縮放旋轉

(學習影片分享:css影片教學

以上是css怎麼縮放旋轉的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板