【零基础学习web前端】CSS3-2D变换(scale()、skew() 方法)
scale()方法
可以使用scale()方法来增加或减少元素大小。
可以改变宽度(X轴)和高度(Y轴)。
[CSS] 纯文本查看 复制代码 div{
width: 100px;
height: 20px;
background-color: #2f65ff;
border: 1px solid black;
}
.box{
margin: 100px;
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Chrome, Safari, Opera */
transform: scale(2,4); /* Standard syntax */
}
[HTML] 纯文本查看 复制代码 <div>
苏飞论坛
</div>
<div class="box">
苏飞论坛
</div>
transform: scale(2,4),即将宽度转换为原始大小的两倍,高度为其原始尺寸的4倍。
效果
skew() 方法
可以使用skew()方法在给定的角度转动元素。
可以沿水平(X轴)和垂直(Y轴)线旋转元素。
[CSS] 纯文本查看 复制代码 div{
width: 100px;
height: 50px;
background-color: #2f65ff;
border: 1px solid black;
}
.box{
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Chrome, Safari, Opera */
transform: skew(30deg,20deg); /* Standard syntax */
}
[HTML] 纯文本查看 复制代码 <div>
苏飞论坛
</div>
<div class="box">
苏飞论坛
</div>
transform: skew(30deg,20deg),沿水平轴旋转30度,沿垂直线旋转20度。
效果
|