CSS3的2D转换效果

阅读() @2018-10-29 18:16:04

通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。

css3转换主要是用transform来实现的,具体如下:


				
.box{width:100px;height:100px;background:red}
<div class="box"></div>

一、旋转rotate(默认是以Z轴为中心)

.box:hover{transform:rotate(30deg)}

二、移动translate(根据给定的x坐标和y坐标进行移动【横向、纵向】)

.box:hover{transform:translate(100px,0px)}

三、缩放(根据给定的宽度(x)和高度(y)缩放相应的比例)

.box:hover{transform:scale(0.5,0.5)}

四、拉长延伸(以x轴为中心翻转30度,以y轴为中心翻转20度)

.box:hover{transform:skew(30,20)}

大家有兴趣可以自己动手试一下!

微信二维码