溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
如何用CSS3實現元素旋轉效果？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
1、實現以下效果，且使用純DIV+CSS
附加說明：
1、帶蝴蝶的粉色圓圈是一張圖片
2、中間的“4色花”是由4個半圓通過旋轉生成的,每個半圓的直徑為180px
1、準備素材：當前案例的素材為帶蝴蝶的粉色圓圈
2、創建好index.html，寫好架構，架構如何分析呢
思路分析：
1、目標外層是一個div,div的背景圖片為一個帶蝴蝶的粉色圓圈
2、div內包含一朵4色花，所以這朵花由5個部分組成，4個花瓣+1個白色小孔心
好，先按照分析，寫好思路，暫時不管css的實現
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS旋轉案例</title>
</head>
<body>
<div class="wrapper">
<div class="bottole">
<div class="leaf leaf2"></div>
<div class="leaf leaf3"></div>
<div class="leaf leaf4"></div>
<div class="leaf"></div>
<div class="smallcircle"></div>
</div>
</div>
</body>
</html>3、寫樣式 ，創建css文件夾，里面新建index.css
思路分析：
.container * 公共樣式
1、定義公共樣式
.wrapper *{
margin:0;
padding:0;
}.bottole 外層div設置
1、因為要保證背景圖片完全顯示出來，所以一定要大于背景圖片
2、背景圖片不能重復
.bottole{
width: 640px;
height: 420px;
background-image: url(../images/pao.png);
background-repeat: no-repeat;
background-position-x: 40px;
background-position-y: -35px;
}.leaf 半圓 葉子
1、因為半圓直徑為180，所以高度肯定是90px,然后半圓我們可以通過border-radius實現，且默認顏色我們就定義為橙色，為了讓4個半圓重疊在一起，就必須使用position:absolute，然后需要設置margin-left,margin-top讓它的位置呈現目標效果(這里我們可以通過不斷調試得出)
.wrapper .leaf {
width: 180px;
height: 90px;
border-radius: 180px 180px 0 0;
background-color: orange;
position: absolute;
margin-left: 100px;
margin-top: 150px;
}.leaf2 葉子單獨設置
1、該葉子的顏色為綠色，且需要旋轉90度
.wrapper .leaf2 {
background: green;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}.leaf3 葉子單獨設置
1、該葉子的顏色為藍色，且需要旋轉180度
.wrapper .leaf3 {
background: blue;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}.leaf4 葉子單獨設置
1、該葉子的顏色為紅色，需要旋轉的角度為270度
.wrapper .leaf4 {
background: red;
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}小圓孔 花心設置
1、小圓孔大小為20，我們可以讓一個div大小都為20，然后border-radius也為20就可以制作成一個圓
2、背景色為白色
3、為了讓孔位于花朵中心，我們需要設置margin-left,margin-top
.smallcircle{
width: 20px;
height: 20px;
background-color: white;
border-radius: 20px;
position: absolute;
margin-left: 180px;
margin-top: 190px;
}好，到目前為止，我們把想到的樣式全部寫好了，具體不對，我們再來修改
目前為止，css所有內容如下：
.wrapper *{
margin:0;
padding:0;
}
.bottole{
width: 640px;
height: 420px;
border-radius: 400px;
background-image: url(../images/pao.png);
background-repeat: no-repeat;
background-position-x: 40px;
background-position-y: -35px;
}
.wrapper .leaf {
width: 180px;
height: 90px;
border-radius: 180px 180px 0 0;
background-color: orange;
position: absolute;
margin-left: 100px;
margin-top: 150px;
}
.wrapper .leaf2 {
background: green;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.wrapper .leaf3 {
background: blue;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.wrapper .leaf4 {
background: red;
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.smallcircle{
width: 20px;
height: 20px;
background-color: white;
border-radius: 20px;
position: absolute;
margin-left: 180px;
margin-top: 190px;
}將css引入index.html中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS旋轉案例</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
<div class="bottole">
<div class="leaf leaf2"></div>
<div class="leaf leaf3"></div>
<div class="leaf leaf4"></div>
<div class="leaf"></div>
<div class="smallcircle"></div>
</div>
</div>
</body>
</html>運行效果如下：
關于如何用CSS3實現元素旋轉效果問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
