首页 > 代码库 > trasition，transform，旋转
trasition，transform，旋转
<!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/images/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>
本文出自 “matengbing” 博客，请务必保留此出处http://matengbing.blog.51cto.com/11395502/1875978
trasition，transform，旋转