如何用CSS3實(shí)現(xiàn)元素旋轉(zhuǎn)效果

如何用CSS3實(shí)現(xiàn)元素旋轉(zhuǎn)效果？針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

讓客戶(hù)滿意是我們工作的目標(biāo)，不斷超越客戶(hù)的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶(hù)，將通過(guò)不懈努力成為客戶(hù)在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊(cè)、網(wǎng)絡(luò)空間、營(yíng)銷(xiāo)軟件、網(wǎng)站建設(shè)、大方網(wǎng)站維護(hù)、網(wǎng)站推廣。

問(wèn)題：

1、實(shí)現(xiàn)以下效果，且使用純DIV+CSS

附加說(shuō)明：

1、帶蝴蝶的粉色圓圈是一張圖片

2、中間的“4色花”是由4個(gè)半圓通過(guò)旋轉(zhuǎn)生成的,每個(gè)半圓的直徑為180px

現(xiàn)在來(lái)具體操作

1、準(zhǔn)備素材：當(dāng)前案例的素材為帶蝴蝶的粉色圓圈

如何用CSS3實(shí)現(xiàn)元素旋轉(zhuǎn)效果

2、創(chuàng)建好index.html，寫(xiě)好架構(gòu)，架構(gòu)如何分析呢

思路分析：

1、目標(biāo)外層是一個(gè)div,div的背景圖片為一個(gè)帶蝴蝶的粉色圓圈

2、div內(nèi)包含一朵4色花，所以這朵花由5個(gè)部分組成，4個(gè)花瓣+1個(gè)白色小孔心

好，先按照分析，寫(xiě)好思路，暫時(shí)不管css的實(shí)現(xiàn)

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>CSS旋轉(zhuǎn)案例</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、寫(xiě)樣式，創(chuàng)建css文件夾，里面新建index.css

思路分析：

.container * 公共樣式

1、定義公共樣式

.wrapper *{
    margin:0;
    padding:0;
}

.bottole 外層div設(shè)置

1、因?yàn)橐ＷC背景圖片完全顯示出來(lái)，所以一定要大于背景圖片

2、背景圖片不能重復(fù)

  .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、因?yàn)榘雸A直徑為180，所以高度肯定是90px,然后半圓我們可以通過(guò)border-radius實(shí)現(xiàn)，且默認(rèn)顏色我們就定義為橙色，為了讓4個(gè)半圓重疊在一起，就必須使用position:absolute，然后需要設(shè)置margin-left,margin-top讓它的位置呈現(xiàn)目標(biāo)效果(這里我們可以通過(guò)不斷調(diào)試得出)

  .wrapper .leaf {
    width: 180px;
    height: 90px;
    border-radius: 180px 180px 0 0;
    background-color: orange;
    position: absolute;
    margin-left: 100px;
    margin-top: 150px;
  }

.leaf2 葉子單獨(dú)設(shè)置

1、該葉子的顏色為綠色，且需要旋轉(zhuǎn)90度

.wrapper .leaf2 {
    background: green;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }

.leaf3 葉子單獨(dú)設(shè)置

1、該葉子的顏色為藍(lán)色，且需要旋轉(zhuǎn)180度

  .wrapper .leaf3 {
    background: blue;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }

.leaf4 葉子單獨(dú)設(shè)置

1、該葉子的顏色為紅色，需要旋轉(zhuǎn)的角度為270度

  .wrapper .leaf4 {
    background: red;
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }

小圓孔花心設(shè)置

1、小圓孔大小為20，我們可以讓一個(gè)div大小都為20，然后border-radius也為20就可以制作成一個(gè)圓

2、背景色為白色

3、為了讓孔位于花朵中心，我們需要設(shè)置margin-left,margin-top

  .smallcircle{
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 20px;
    position: absolute;
    margin-left: 180px;
    margin-top: 190px;
  }

好，到目前為止，我們把想到的樣式全部寫(xiě)好了，具體不對(duì)，我們?cè)賮?lái)修改

目前為止，css所有內(nèi)容如下：

.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旋轉(zhuǎn)案例</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>

運(yùn)行效果如下：

如何用CSS3實(shí)現(xiàn)元素旋轉(zhuǎn)效果

關(guān)于如何用CSS3實(shí)現(xiàn)元素旋轉(zhuǎn)效果問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

新聞標(biāo)題：如何用CSS3實(shí)現(xiàn)元素旋轉(zhuǎn)效果
網(wǎng)頁(yè)URL：http://m.newbst.com/article10/jicjgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、關(guān)鍵詞優(yōu)化、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站營(yíng)銷(xiāo)、電子商務(wù)、網(wǎng)站設(shè)計(jì)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

如何用CSS3實(shí)現(xiàn)元素旋轉(zhuǎn)效果

問(wèn)題：

現(xiàn)在來(lái)具體操作