transform

transform屬性:變換,通常使用4個值,分別是skew扭曲,translate位移,rotate比旋轉,scale比例縮放css

練習代碼以下:html

<!DOCTYPE html>
<html>
<head>
<title>transform</title>
<meta charset="utf-8">
<style type="text/css">
div{margin: 80px auto;height: 120px;width:120px;border:5px solid red;transform-style: preserve-3d;text-align: center; line-height: 100px;}
div:nth-child(1):hover{
transform: skew(30deg);
}
div:nth-child(2):hover{
transform: scale(2);
}
div:nth-child(3):hover{
transform: rotate(45deg);
}
div:nth-child(4):hover{
transform: translate(20px,20px);
}
</style>
</head>
<body>
<div title="我默認skewX扭曲">skew扭曲</div>
<div title="我會放大一倍">scale比例縮放</div>
<div title="我會順時針旋轉45度,正值順時針,負值逆時針">rotate旋轉</div>
<div title="我會向右下角位移20px">translate位移</div>
</body>
</html>3d

相關文章
相關標籤/搜索