4种CSS3效果：旋转、旋转放大、放大、移动

2016年5月30日 17:24 星期一

字号：小中大

听说过CSS3的强大，也见识过，但一直没有仔细研究它，其实CSS这种东东算是最入门级的代码玩具了，CSS3相比过去只是新增了许多新的东东，今天我们就来看看CSS3特有的4种动态效果。需要注意的是：请不要试图在IE9版本以下的IE浏览器中看到任何效果，而Chrome、Firefox这类浏览器就比较给力，它们对CSS3毫无压力。

以下为全部代码：

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>4种CSS3效果：旋转、旋转放大、放大、移动</title>
<style>.a{transition:All 0.4s ease-in-out;-webkit-transition:All 0.4s ease-in-out;-moz-transition:All 0.4s ease-in-out;-o-transition:All 0.4s ease-in-out;width:200px;height:200px;background-color:#000000;display:block;margin:100px auto;color:#fff;text-align:center;line-height:200px;font-size:20px;font-weight:bold;}.a:hover{transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);}.a1{transition:All 0.4s ease-in-out;-webkit-transition:All 0.4s ease-in-out;-moz-transition:All 0.4s ease-in-out;-o-transition:All 0.4s ease-in-out;width:200px;height:200px;background-color:#000000;display:block;margin:100px auto;color:#fff;text-align:center;line-height:200px;font-size:20px;font-weight:bold;}.a1:hover{transform:scale(1.2);-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-o-transform:scale(1.2);-ms-transform:scale(1.2);}.a2{transition:All 0.4s ease-in-out;-webkit-transition:All 0.4s ease-in-out;-moz-transition:All 0.4s ease-in-out;-o-transition:All 0.4s ease-in-out;width:200px;height:200px;background-color:#000000;display:block;margin:100px auto;color:#fff;text-align:center;line-height:200px;font-size:20px;font-weight:bold;}.a2:hover{transform:rotate(360deg) scale(1.2);-webkit-transform:rotate(360deg) scale(1.2);-moz-transform:rotate(360deg) scale(1.2);-o-transform:rotate(360deg) scale(1.2);-ms-transform:rotate(360deg) scale(1.2);}.a3{transition:All 0.4s ease-in-out;-webkit-transition:All 0.4s ease-in-out;-moz-transition:All 0.4s ease-in-out;-o-transition:All 0.4s ease-in-out;width:200px;height:200px;background-color:#000000;display:block;margin:100px auto;color:#fff;text-align:center;line-height:200px;font-size:20px;font-weight:bold;}.a3:hover{transform:translate(0,-10px);-webkit-transform:translate(0,-10px);-moz-transform:translate(0,-10px);-o-transform:translate(0,-10px);-ms-transform:translate(0,-10px);}</style>
</head>
<body>
<a class="a">360度旋转</a>
<a class="a1">放大效果</a>
<a class="a2">旋转放大</a>
<a class="a3">上下移动</a>
</body>
</html>