transform 字面上的意思就是 使改变外观、改变形态
在css3中transform主要包括以下几种
1.旋转 rotate
2.倾斜 skew
3.缩放 scale
4.移动 translate
下面我们就一起来看看transform的rotate、skew、scale、translate具体如何实现。
语法
transform:none
transform:rotate | skew | scale | translate
none:表示不进行变换
表示一个或多个变换函数,空格分开,意思就是我们同时对一个元素进行transform的多种属性操作,使用多个属性时需要有空格隔开
一、旋转rotate
transform:rotate();
旋转;其中“deg”是“度”的意思,如“10deg”表示“10度”
rotate()方法,
通过指定的角度参数对元素指定一个2D rotation(2D旋转)
在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。
下面我就做一个“福字”例子
html
<div class="box">
<div class="box1">
福
</div>
</div>
css
<style>
html,body{
height: 100%;
margin: 0;
padding: 0;
position: relative;
}
.box{
width: 100px;
height: 100px;
background: red;
position: absolute;
left:calc(50% - 50px);
top:calc(50% - 50px);
transform: rotate(45deg);
}
.box .box1{
font-size: 50px;
font-weight: bold;
text-align: center;
line-height: 100px;
transform: rotate(135deg);
}
</style>
例:
二、倾斜 skew
倾斜具有三种情况
skew(x,y)使元素在水平和垂直方向同时倾斜(X轴和Y轴同时按一定的角度值进行倾斜变形);
skewX(x)仅使元素在水平方向倾斜变形(X轴倾斜变形);
skewY(y)仅使元素在垂直方向倾斜变形(Y轴倾斜变形)
三、缩放 scale
缩放scale和倾斜skew是极其相似,也具有三种情况
scale(x,y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放);
scaleX(x)元素仅水平方向缩放(X轴缩放);
scaleY(y)元素仅垂直方向缩放(Y轴缩放)
但它们具有相同的缩放中心点和基数,其中心点就是元素的中心位置,缩放基数为1,如果其值大于1元素就放大,反之其值小于1,元素缩小。
四、移动translate
移动translate和skew、scale一样同样具有三种情况
translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动);
translateX(x)仅水平方向移动(X轴移动);
translateY(Y)仅垂直方向移动(Y轴移动)
以下列出了所有的转换属性
2D转换方法
如果文中有不妥或者错误的地方还望高手的您指出,以免误人子弟。
如果您有更好的建议,不如留言一起讨论,共同进步! 再次感谢您耐心的读完本篇文章。
vx:bsl521921
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。