旋转1：
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> #box { background:red; color:#fff; width:100px; height:100px; } #box:hover{ transform: rotateY(360deg); transition: .5s all; -webkit-transition: .5s all; -moz-transition: .5s all; -o-transition: .5s all; -ms-transition: .5s all;
transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out; /* Firefox 4 */
-webkit-transition-timing-function: ease-out; /* Safari 和 Chrome */
-o-transition-timing-function: ease-out; /* Opera */
} </style> <body> <div id="box">Lee</div> </body> </html>
旋转2
神坑：必须当图标的(字体)大小与div一致时，才会原地旋转，过大或者过小都会异常旋转
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .close { height:auto; width:auto; position: absolute; transition: .8s ease all; -moz-transition: .8s ease all; -webkit-transition: .8s ease all; } .rotate:hover { transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg);} </style> </head> <body> <div class="close rotate"> <!-- 必须当图标的(字体)大小与div一致时(或者DIV的宽高为auto时)，才会原地旋转，过大或者过小都会异常旋转 --> <span style="font-size:2rem">×</span> </div> </body> </html>
旋转2
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .rotate_default { height:auto; width:auto; position: absolute; transition: .8s ease all; -moz-transition: .8s ease all; -webkit-transition: .8s ease all; } /* .rotate:hover { transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); }*/ </style> </head> <body> <div class="rotate_default rotate"> <!-- 必须当图标的(字体)大小与div一致时(或者DIV的宽高为auto时)，才会原地旋转，过大或者过小都会异常旋转 --> <span style="font-size:2rem">×</span> </div> <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script> <script> $(function(){ var cir = Math.floor(Math.random()*5) + 1; var rotate = "rotate(" + cir * 180 + "deg)"; console.log(rotate); $(".rotate").css("transform",rotate); }) </script> </body> </html>
通过jquery旋转