HTML内の画像を循環させる

Question

私はウェブサイトを構築しています。センター画像の周りに6つの画像を周回させたいと思います。 は、ここで私はこれまでに見つけたものです：

CSS：codepen.ioで見つけ

.wrapper { 
    width:300px; 
    margin:0 auto; 
    position:relative; 
    height:300px; 
    transform: rotateX(69deg) 
} 

.circle { 
    position:absolute; 
    top:50%; 
    left:0; 
    animation: rotate 10s linear infinite; 
    transform: rotate(45deg) translateX(150px) rotate(-45deg); 
} 

@keyframes rotate { 
    from { transform: rotate(0deg) translateX(150px) rotate(0deg); } 
    to { transform: rotate(360deg) translateX(150px) rotate(-360deg); } 
} 

これではなく、私の仕事。それは私が見た最高ですが、それはまだ私が探しているものではありません。一つは、イメージはすべて面白いストレッチされています。複数の画像では機能しません。

の画像をすべてに円で囲み、どのように配置されているかをmy siteにします。

Answer 1

イメージごとに異なるアニメーションを作成する必要があります。私はそれがjQueryのか、SCSSで容易に行うことができると確信しているが、私はそれをスペルアウトしました：

body { 
 
\t margin: 0; 
 
\t text-align: center; 
 
} 
 

 
#center { 
 
\t margin-top: 150px; 
 
\t display: inline-block; 
 
\t width: 50px; 
 
\t height: 50px; 
 
\t font-size: 50px; 
 
\t line-height: 50px; 
 
\t position: relative; 
 
} 
 

 
.rotate { 
 
\t position: absolute; 
 
\t top: calc(50% - 50px); 
 
\t left: calc(50% - 50px); 
 
\t width: 100px; 
 
\t height: 100px; 
 
} 
 

 
.rotate:first-of-type { 
 
\t background: red; 
 
\t transform: rotate(-30deg) translateY(-150px) rotate(30deg); 
 
\t animation: rotate-1 10s linear infinite; 
 
} 
 

 
@keyframes rotate-1 { 
 
\t from { transform: rotate(-30deg) translateY(-150px) rotate(30deg) } 
 
\t to { transform: rotate(330deg) translateY(-150px) rotate(-330deg) } 
 
} 
 

 
.rotate:nth-of-type(2) { 
 
\t background: orange; 
 
\t transform: rotate(30deg) translateY(-150px) rotate(-30deg); 
 
\t animation: rotate-2 10s linear infinite; 
 
} 
 

 
@keyframes rotate-2 { 
 
\t from { transform: rotate(30deg) translateY(-150px) rotate(-30deg) } 
 
\t to { transform: rotate(390deg) translateY(-150px) rotate(-390deg) } 
 
} 
 

 
.rotate:nth-of-type(3) { 
 
\t background: yellow; 
 
\t transform: rotate(90deg) translateY(-150px) rotate(-90deg); 
 
\t animation: rotate-3 10s linear infinite; 
 
} 
 

 
@keyframes rotate-3 { 
 
\t from { transform: rotate(90deg) translateY(-150px) rotate(-90deg) } 
 
\t to { transform: rotate(450deg) translateY(-150px) rotate(-450deg) } 
 
} 
 

 
.rotate:nth-of-type(4) { 
 
\t background: green; 
 
\t transform: rotate(150deg) translateY(-150px) rotate(-150deg); 
 
\t animation: rotate-4 10s linear infinite; 
 
} 
 

 
@keyframes rotate-4 { 
 
\t from { transform: rotate(150deg) translateY(-150px) rotate(-150deg) } 
 
\t to { transform: rotate(510deg) translateY(-150px) rotate(-510deg) } 
 
} 
 

 
.rotate:nth-of-type(5) { 
 
\t background: blue; 
 
\t transform: rotate(210deg) translateY(-150px) rotate(-210deg); 
 
\t animation: rotate-5 10s linear infinite; 
 
} 
 

 
@keyframes rotate-5 { 
 
\t from { transform: rotate(210deg) translateY(-150px) rotate(-210deg) } 
 
\t to { transform: rotate(570deg) translateY(-150px) rotate(-570deg) } 
 
} 
 

 
.rotate:last-of-type { 
 
\t background: indigo; 
 
\t transform: rotate(270deg) translateY(-150px) rotate(-270deg); 
 
\t animation: rotate-6 10s linear infinite; 
 
} 
 

 
@keyframes rotate-6 { 
 
\t from { transform: rotate(270deg) translateY(-150px) rotate(-270deg) } 
 
\t to { transform: rotate(630deg) translateY(-150px) rotate(-630deg) } 
 
}

<div id="center"> 
 
\t <span>☺</span> 
 
\t <img class="rotate" src="http://v2.trex-game.tk/favicon.png" alt="T-Rex Game" width="64" height="64"> 
 
\t <img class="rotate" src="/img/code.png" alt="ProHackr112 Code" width="64" height="64&quot;"> 
 
\t <img class="rotate" src="/img/donut.png" alt="Have A Donut" width="75" height="80"> 
 
\t <img class="rotate" src="https://addons.cdn.mozilla.net/user-media/addon_icons/417/417300-64.png" alt="" width="72" height="72"> 
 
\t <img class="rotate" src="https://github.com/fluidicon.png" alt="" width="63" height="63"> 
 
\t <img class="rotate" src="https://rubiks.com/images/carousel/solve-it-rubiks-cube.png" alt="Rubik's Cube Experiments" width="96" height="96"> 
 
</div>

を複数のアニメーションは、ブラウザのパフォーマンスのために良いではないことに注意してください。