Question

<html>
  <head>
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    <!-- links to stylesheet.css -->
    <title>Natural Wonders</title>
  </head>
  <body>
    <div class="circle"><p>Natural Wonders</p></div>
    <img src="http://upload.wikimedia.org/wikipedia/commons/6/63/Aurora_Borealis.jpg"/>
    <img src="https://wallwidehd.com/wp-content/uploads/Rio-De-Janeiro-At-Night-Wallpaper.jpg"/>
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Toroweap_Sunrise_%2810727086534%29.jpg/1920px-Toroweap_Sunrise_%2810727086534%29.jpg"/>
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Blue_Linckia_Starfish.JPG/800px-Blue_Linckia_Starfish.JPG"/>
    <img src="http://upload.wikimedia.org/wikipedia/commons/8/8b/Everest_Peace_Project_-_Everest_summit.jpg"/>
    <img src="http://upload.wikimedia.org/wikipedia/commons/6/63/Aurora_Borealis.jpg"/>
    <img src="http://upload.wikimedia.org/wikipedia/commons/2/26/Paricutin_30_613.jpg"/>
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Victoria_Falls_2012.jpg/1920px-Victoria_Falls_2012.jpg"/>
  </body>
</html>
img{
  width:100px;
  height:100px;
  border-radius:50%;  
}
.circle
{
color:white;
position:absolute;
top:50%;
left:50%;
  width:10em;
  height:10em;
  background: black;
  border-radius:50%;
  transform: translate(-50%, -50%);
  text-align:center;
  line-height:8em;
}

我或多或少地以div为中心，我需要imgs将它环绕成一个圆圈，这样它看起来就像一朵花，img作为花瓣，div作为中心...我该怎么办？去做？我知道它非常简单，但我用Google搜索并研究了很长时间，无法让它发挥作用。

Answer 1

试试这个。如上所述，它是图像及其包装div的绝对定位和变换旋转属性的组合

<html>
  <head>
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    <!-- links to stylesheet.css -->
    <title>Natural Wonders</title>
    <style type="text/css">
img{
  width:100px;
  height:100px;
  border-radius:50%;  
  position: absolute;
}

.tryMe{width:20em;height:20em;position: absolute;}

.wrapper{position: absolute;
top: 50%;
left: 50%;
width: 10em;
height: 10em;
transform: translate(-100%, -100%);
}

.tryMe:nth-child(2){transform: rotate(45deg);}
.tryMe:nth-child(3){transform: rotate(90deg);}
.tryMe:nth-child(4){transform: rotate(135deg);}
.tryMe:nth-child(5){transform: rotate(180deg);}
.tryMe:nth-child(6){transform: rotate(225deg);}
.tryMe:nth-child(7){transform: rotate(270deg);}
.tryMe:nth-child(8){transform: rotate(315deg);}

.tryMe:nth-child(2) img{transform: rotate(-45deg);}
.tryMe:nth-child(3) img{transform: rotate(-90deg);}
.tryMe:nth-child(4) img{transform: rotate(-135deg);}
.tryMe:nth-child(5) img{transform: rotate(-180deg);}
.tryMe:nth-child(6) img{transform: rotate(-225deg);}
.tryMe:nth-child(7) img{transform: rotate(-270deg);}
.tryMe:nth-child(8) img{transform: rotate(-315deg);}

.circle p {position: absolute;width:10em;height:10em;}

.circle
{
color:white;
position:absolute;
top:50%;
left:50%;
  width:10em;
  height:10em;
  background: black;
  border-radius:50%;
  transform: translate(-50%, -50%);
  text-align:center;
  line-height:8em;
}
    </style>
  </head>
  <body>
    <div class="circle"><p>Natural Wonders</p></div>

    <div class="wrapper">
        <div class="tryMe"><img src="http://upload.wikimedia.org/wikipedia/commons/6/63/Aurora_Borealis.jpg"/></div>
       <div class="tryMe"> <img src="https://wallwidehd.com/wp-content/uploads/Rio-De-Janeiro-At-Night-Wallpaper.jpg"/></div>
       <div class="tryMe"> <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Toroweap_Sunrise_%2810727086534%29.jpg/1920px-Toroweap_Sunrise_%2810727086534%29.jpg"/></div>
       <div class="tryMe"> <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Blue_Linckia_Starfish.JPG/800px-Blue_Linckia_Starfish.JPG"/></div>
       <div class="tryMe"> <img src="http://upload.wikimedia.org/wikipedia/commons/8/8b/Everest_Peace_Project_-_Everest_summit.jpg"/></div>
       <div class="tryMe"> <img src="http://upload.wikimedia.org/wikipedia/commons/6/63/Aurora_Borealis.jpg"/></div>
       <div class="tryMe"> <img src="http://upload.wikimedia.org/wikipedia/commons/2/26/Paricutin_30_613.jpg"/></div>
       <div class="tryMe"> <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Victoria_Falls_2012.jpg/1920px-Victoria_Falls_2012.jpg"/></div>

    </div>

  </body>
</html>

在div周围包裹7 <img/>个

1 个答案: