![在這裏插入圖片描述]()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>手動開花</title>
<style type="text/css">
body{
background-color:
}
.lotus{
width: 300px;
height: 300px;
/* background-color: red; */
/* transform：變換 旋轉 */
transform: rotate(45deg);
margin:150px auto;
}
.lotus > div{
/* 規範：定位，浮動，display寫在選擇器的前面，讓程序的性能達到最高 */
/* 代碼性能優化，能提升頁面打開速度 */
/* 根據自身定位 將lotus下div重疊在一起 */
position: absolute;
width: 300px;
height: 300px;
background-color: pink;
margin: 10px;
/* 左上 右上 右下 左下 */
border-radius: 0 300px 0 300px;
/* rotate旋轉 默認每個盒子旋轉的中心點就在盒子的中心 */
transform-origin: 300px 300px; /* x軸位置 y軸位置 */
opacity: 0.5;
transition: 2s;
}
.lotus:hover > div:nth-child(1) {
transform: rotate(30deg);
}
.lotus:hover > div:nth-child(2) {
transform: rotate(60deg);
}
.lotus:hover > div:nth-child(3) {
transform: rotate(90deg);
}
.lotus:hover > div:nth-child(4) {
transform: rotate(-30deg);
}
.lotus:hover > div:nth-child(5) {
transform: rotate(-60deg);
}
.lotus:hover > div:nth-child(6) {
transform: rotate(-90deg);
}
</style>
</head>
<body>
<div class="lotus">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
