CSS3实现2D效果-旋转 变大，移动
CSS文件里面的代码↓↓ css3-2D效果.css
/*设置全部div的属性*/ div{ width:100px; /*设置宽度*/ height:100px;/*设置高度*/ background:red;/*设置背景颜色*/ margin-left:50px;/*设置左外边框距离*/ transition:all 1s; /*设置过度时间*/ float:left;/*向左浮动*/ } .div1:hover{ transform:translate(100px);/*向右移动100px*/ } .div2:hover{ transform:rotate(360deg);/*设置旋转角度360°*/ } .div3:hover{ transform:scale(1.5,1.5);/*设置xy坐标，相当于向xy坐标扩大多少倍*/ } .div4:hover{ transform:skew(30deg,20deg);/*围绕 X 轴把元素翻转30度，围绕 Y 轴翻转 20 度*/ }
html里面的代码↓↓↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>css3-2D效果</title> <meta name="keywords" content="关键字列表" /> <meta name="description" content="网页描述" /> <link rel="stylesheet" type="text/css" href="css3-2D效果.css" /> <style type="text/css"></style> <script type="text/javascript"></script> </head> <body> <div class="div1">2D转换translate</div> <div class="div2">2D转换rotate</div> <div class="div3">2D转换scale</div> <div class="div4">2D转换skew</div> </body> </html>
原文：http://www.cnblogs.com/czbkhzh/p/6095304.html