溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
<!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>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
