好模糊
1 回答
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3D 特效</title>
<style type="text/css">
*{ margin:0; padding; }/*transition-property:background-color;transition-duration:1s;transition-timing-function:ease;*/
#block1{ width:400px; height:400px; background-color:#69c; margin:0 auto; transition: 2s; -webkit-transition: background-color 2s; -moz-transition:background-color 2s;}
#block1:hover{ background-color: #F00; }
#experiment{perspective:800px; perspective-origin:50% 50%; transform-style:preserve-3d;-webkit-perspective:800; -webkit-perspective-origin:50% 50%; -webkit-transform-style:preserve-3d;-moz-perspective:800; -moz-perspective-origin:50% 50%; -moz-transform-style:preserve-3d;}
#block{ width:500px; height: 500px; background-color:#3333FF; margin:100px auto;
transition: 2s}
#block:hover{transform:rotateX(45deg);-webkit-transform:rotateX(45deg);-moz-transform:rotateX(45deg);}
</style>
</head>
<body>
<div id="block1"></div>
<div id="experiment">
<div id="block">
</div>
</div>
</body>
</html>
举报
0/150
提交
取消
