html 代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>test</title>
- <!--<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> -->
- <!-- 鼠标经过向右移动 100 像素 -->
- </head>
- <style>
- .demo_box{
- border: 1px solid #3DA5DC;
- background: #a4dcf9;
- height: 100px;
- width: 200px;
- text-align: center;
- color: #fff;
- margin:50px 100px;
- }
- .rotate_clockwise,.rotate_anticlockwise,.rotateX,.rotateY,.rotateZ{
- -webkit-transition:1s ease all;
- -moz-transition:1s ease all;
- background:#4d6ea6;
- }
- .rotate_clockwise:hover{
- -webkit-transform:rotate(45deg);
- -moz-transform:rotate(45deg);
- }
- .rotate_anticlockwise:hover{
- -webkit-transform:rotate(-45deg);
- -moz-transform:rotate(-45deg);
- }
- .rotateX:hover{
- -webkit-transform:perspective(800px) rotateX(60deg);
- -moz-transform:perspective(800px) rotateX(60deg);
- }
- .rotateY:hover{
- -webkit-transform:perspective(800px) rotateY(60deg);
- -moz-transform:perspective(800px) rotateY(60deg);
- }
- .rotateZ:hover{
- -webkit-transform:perspective(800px) rotateZ(60deg);
- -moz-transform:perspective(800px) rotateZ(60deg);
- }
- </style>
- <body>
- <div class="demo_box rotate_clockwise"> 顺时针旋转 45 度 </div>
- <div class="demo_box rotate_anticlockwise"> 逆时针旋转 45 度 </div>
- <div class="demo_box rotateX">3 维空间内 X 轴旋转 60 度 </div>
- <div class="demo_box rotateY">3 维空间内 Y 轴旋转 60 度 </div>
- <div class="demo_box rotateZ">3 维空间内 Z 轴旋转 60 度 </div>
- </body>
- </html>
来源: http://www.qdfuns.com/article/17978/91f26c0d7734967cd70f012e9bb30cff.html