旋转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旋转