围绕 <img>div 缠绕 7 秒

<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 居中，我需要 img 将它绕成一个圆圈，这样它看起来有点像一朵花，以 img 为花瓣，以div 为中心......我该怎么做？我知道它真的很简单，但我用谷歌搜索和研究了很长时间，无法让它工作。

试试这个。如前所述，它是图像及其包装器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>

相关内容

最新更新

热门标签：