CSS3如何做平移效果

1、CSS样式代码如下所示，<style>*{ padding:50px;}.ping{display:inline-block;margin:10px;padding:10px 10px;border:1px solid #000;background-color:#FF0000;width:100px; height:100px;}.ping1{ -webkit-transform:skew(35deg);}.ping2{ -webkit-transform:scale(1,0.5);}.ping3{ -webkit-transform:rotate(45deg);}.ping4{ -webkit-transform:translate(10px,20px);}.ping5{ -webkit-transform:skew(35deg);:scale(1,0.5);rotate(45deg);translate(10px,20px); margin-left:50px;}</style>就这么点代码实现了简短的倾斜、缩放、旋转、平移的效果。

2、.ping1{ -webkit-transform:skew(35deg);}这段代码表示倾斜35度。

3、.ping2{ -webkit-transform:scale(1,0.5);}这个表示缩放，1表示正常的宽，0.5表示正常高的一半。

4、.ping3{ -webkit-transform:rotate(45deg);}这段代码表示顺时针旋转45度。

5、.ping4{ -webkit-transform:translate(10px,20px);}这段代码表示平移，10px表示向右平移10px;20px表示向下平移20px。

6、下面我们来看一下DIV代码，代码很简单如下所示，<div class="ping ping1"></div><div class="ping ping2"></div><div class="ping ping3"></div><br><div class="ping ping4"></div><div class="ping ping5"></div>

7、下面我们保存一下代码，用浏览器打开，效果如下所示。