<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<style>

body{

margin: 100px;

}

.div1{

width: 200px;

height: 150px;

transform: rotate(30deg);

background-color: antiquewhite;

color: chartreuse;

}

.div2{

width: 800px;

height: 400px;

background-color: black;

/*opacity: 0.3;*/

position: absolute;

bottom: 20px;

right: 100px;

color: chartreuse;

}

.img_div{

width: 30px;

height: 30px;

float: right;

background: url("res/p_w_picpaths/close.jpg") no-repeat;

/*将背景图片设置和div一样大小，否则旋转旋转岁div旋转，图片的效果就不是绕中心旋转*/

background-size: 30px;

transition: 500ms;


}


.img_div:hover{

transform: rotate(405deg);


}

.div3{

width: 200px;

height: 200px;

background-color: blueviolet;

transition: 1s;

}

.div3:hover{

transform: translate3d(0px,-12px,0px);

box-shadow: 0px 14px 0px rgba(0,0,0,.5);

}

</style>

</head>

<body>

<div class="div1">

顺时针旋转(绕中心)30度 transform: rotate(30deg);

</div>


<div class="div2">

<div class="img_div">


</div>

transform: rotateX(405deg); 顺时针旋转(绕x轴)30度

<hr>

transform: rotateY(405deg); 顺时针旋转(绕y轴)30度

<hr>

translate(x,y,z) 指定元素在三维空间偏移

</div>


<div class="div3"></div>

</body>

</html>