CSSアニメーションに関する問題

Question

http://codepen.io/Feners4/pen/KggAwg

私は立方体を360度回転させて回転させたいと思います。私の立方体は軸360度で回転します。アニメーションはすべてクレイジーになり、キューブもまた動かなくなります。どうすればそれらを回転させることができますか？

マイCSS：

@red: rgb(131, 168, 226); 
@size: 100px; 
body { 
    background-color: #dff; 
} 

header { 
    text-align: center; 
} 

h1 { 
    text-align: center; 
    padding: 9px; 
} 

.wrap { 
    perspective: 1000px; 
    perspective-origin: 46% 70px; 
} 

.cube { 
    position: relative; 
    width: 200px; 
    transform-style: preserve-3d; 
    animation: spin 10s linear infinite; 
    animation-play-state: paused; 
    animation-direction: alternate; 
} 

.cube div { 
    border: 10; 
    border-style: solid; 
    border-color: rgb(173, 222, 247); 
    opacity: .5; 
    position: absolute; 
    left: 100px; 
    width: 200px; 
    height: 200px; 
} 
.cube:hover { 
    animation-play-state: running; 
} 
@keyframes spin { 
    5% { 
    transform: rotateY(360deg); 
    } 
} 

.back { 
    border: 5px solid @red; 
    outline-style: single; 
    background: @red; 
    transform: translateZ(-100px) rotateY(180deg); 
} 

.right { 
    opacity: 0.50; 
    border: 5px solid @red; 
    outline-style: single; 
    background: @red; 
    transform: rotateY(-270deg) translateX(87px); 
    transform-origin: top right; 
} 

.left { 
    opacity: 0.50; 
    border: 5px solid @red; 
    outline-style: single; 
    background: @red; 
    transform: rotateY(270deg) translateX(-100px); 
    transform-origin: center left; 
} 

.top { 
    opacity: 0.50; 
    background: @red; 
    transform: rotateX(-90deg) translateY(-109px); 
    transform-origin: top center; 
} 

.bottom { 
    opacity: 50; 
    border: 5px solid @red; 
    outline-style: single; 
    background: @red; 
    transform: rotateX(90deg) translateY(109px); 
    transform-origin: bottom center; 
} 

.front { 
    text-align: center; 
    color: rgb(173, 222, 247); 
    opacity: 0.50; 
    border: 2px solid @red; 
    outline-style: single; 
    background: @red; 
    transform: translateZ(109px); 
} 

.wrap2 { 
    perspective: 1000px; 
    perspective-origin: 40% 70px; 
} 

.cube2 { 
    position: relative; 
    width: 100px; 
    transform-style: preserve-3d; 
    animation: spin 10s linear infinite; 
    animation-play-state: paused; 
    animation-direction: alternate; 
} 

.cube2 div { 
    border: 10; 
    border-style: solid; 
    border-color: rgb(173, 222, 247); 
    opacity: .5; 
    position: absolute; 
    left: 500px; 
    width: 200px; 
    height: 200px; 
} 

.cube2:hover { 
    animation-play-state: running; 
} 

.back2 { 
    border: 5px solid @red; 
    outline-style: single; 
    background: @red; 
    transform: translateZ(-100px) rotateY(180deg); 
} 

.right2 { 
    opacity: 0.50; 
    border: 5px solid @red; 
    outline-style: single; 
    background: @red; 
    transform: rotateY(-90deg) translateX(87px); 
    transform-origin: top right; 
} 

.left2 { 
    opacity: 0.50; 
    border: 5px solid @red; 
    outline-style: single; 
    background: @red; 
    transform: rotateY(90deg) translateX(-100px); 
    transform-origin: center left; 
} 

.top2 { 
    opacity: 0.50; 
    background: @red; 
    transform: rotateX(-90deg) translateY(-109px); 
    transform-origin: top center; 
} 

.bottom2 { 
    opacity: 50; 
    border: 5px solid @red; 
    outline-style: single; 
    background: @red; 
    transform: rotateX(90deg) translateY(109px); 
    transform-origin: bottom center; 
} 

.front2 { 
    text-align: center; 
    opacity: 0.50; 
    color: rgb(173, 222, 247); 
    border: 2px solid @red; 
    outline-style: single; 
    background: @red; 
    transform: translateZ(109px); 
} 

.wrap3 { 
    perspective: 1000px; 
    perspective-origin: 110% 70px; 
} 

.cube3 { 
    position: relative; 
    width: 200px; 
    transform-style: preserve-3d; 
    animation: spin 10s linear infinite; 
    animation-play-state: paused; 
    animation-direction: alternate; 
} 

.cube3 div { 
    border: 10; 
    border-style: solid; 
    border-color: rgb(173, 222, 247); 
    opacity: .5; 
    position: absolute; 
    left: 999px; 
    width: 200px; 
    height: 200px; 
} 

.cube3:hover { 
    animation-play-state: running; 
} 

.back3 { 
    border: 5px solid @red; 
    outline-style: single; 
    background: @red; 
    transform: translateZ(-110px) rotateY(180deg); 
} 

.right3 { 
    opacity: 0.50; 
    border: 5px solid @red; 
    outline-style: single; 
    background: @red; 
    transform: rotateY(-95deg) translateX(110px); 
    transform-origin: top right; 
} 

.left3 { 
    opacity: 0.50; 
    border: 5px solid @red; 
    outline-style: single; 
    background: @red; 
    transform: rotateY(-270deg) translateX(-90px); 
    transform-origin: center left; 
} 

.top3 { 
    opacity: 0.50; 
    background: @red; 
    transform: rotateX(-90deg) translateY(-95px); 
    transform-origin: top center; 
} 

.bottom3 { 
    opacity: 50; 
    border: 5px solid @red; 
    outline-style: single; 
    background: @red; 
    transform: rotateX(92deg) translateY(109px); 
    transform-origin: bottom center; 
} 

.front3 { 
    text-align: center; 
    color: rgb(173, 222, 247); 
    opacity: 0.50; 
    border: 2px solid @red; 
    outline-style: single; 
    background: @red; 
    transform: translateZ(99px); 
} 

.change-color { 
    color: #fff; 
    background-color: #f45642; 
    cursor: pointer; 
} 

.change-color:hover, 
.change-color:focus, 
.change-color:active { 
    color: #fff; 
    background-color: #f45642; 
    cursor: pointer; 
} 

Answer 1

は私が前変換に働いたことはないが、私はあなたのCSSを見た後、それを試して、

を与えた、と私は思っている必要があり.wrapクラスの属性leftとpositionので、それらの属性を追加して、.cube divから削除しました

私はあなたのコードを変更しました

狂気の回転の修正については

.wrap3 { 
    perspective: 1000px; 
    perspective-origin: 110% 70px; 
    position: absolute; // added position and left 
    left: 999px; 
} 

.cube3 div { 
    border: 10; 
    border-style: solid; 
    border-color: rgb(173, 222, 247); 
    opacity: .5; 
    position: absolute; // kept the position of its child tags, but removed left attribute 
    width: 200px; 
    height: 200px; 
} 

Updated:

へ

.wrap3 { 
    perspective: 1000px; 
    perspective-origin: 110% 70px; 
} 

.cube3 div { 
    border: 10; 
    border-style: solid; 
    border-color: rgb(173, 222, 247); 
    opacity: .5; 
    position: absolute; 
    left: 999px; 
    width: 200px; 
    height: 200px; 
} 

、以下のコードここ

を変更するには、行う必要がありますどのようなアニメーション、時間の0％を言及していませんので、その狂った、時間（0.5秒）の5％に達した後、それはy軸に沿って360回転を開始した

それは、y軸に沿って360deg回転します開始から終了までに、私は、0％に変更

@keyframes spin { 
     0% { 
     transform: rotateY(360deg); 
     } 
    } 

から

@keyframes spin { 
    5% { 
    transform: rotateY(360deg); 
    } 
} 

。

ほとんどのクラスが冗長であるため、2番目のボックスの回転に関する問題をあまりにも掘り下げていないので、これらのクラスをすべて削除しました。

@red: rgb(131, 168, 226); 
@size: 100px; 
body { 
    background-color: #dff; 
} 

header { 
    text-align: center; 
} 

h1 { 
    text-align: center; 
    padding: 9px; 
} 



.wrap { 
    perspective: 1000px; 
    perspective-origin: 46% 70px; 
    left: 100px; 
    position: absolute; 
} 

.wrap2 { 
    perspective: 1000px; 
    perspective-origin: 40% 70px; 
    position: absolute; 
    left: 500px; 
} 

.wrap3 { 
    perspective: 1000px; 
    perspective-origin: 110% 70px; 
    position: absolute; 
    left: 999px; 
} 

.cube { 
    position: relative; 
    width: 200px; 
    transform-style: preserve-3d; 
    animation: spin 10s linear infinite; 
    animation-play-state: paused; 
    animation-direction: alternate; 
} 

.cube div { 
    border: 10; 
    border-style: solid; 
    border-color: rgb(173, 222, 247); 
    opacity: .5; 
    position: absolute; 
    width: 200px; 
    height: 200px; 
} 
.cube:hover { 
    animation-play-state: running; 
} 

@keyframes spin { 
    0% { 
    transform: rotateY(360deg); 
    } 
} 

.back { 
    border: 5px solid @red; 
    outline-style: single; 
    background: @red; 
    transform: translateZ(-100px) rotateY(180deg); 
} 

.right { 
    opacity: 0.50; 
    border: 5px solid @red; 
    outline-style: single; 
    background: @red; 
    transform: rotateY(-270deg) translateX(87px); 
    transform-origin: top right; 
} 

.left { 
    opacity: 0.50; 
    border: 5px solid @red; 
    outline-style: single; 
    background: @red; 
    transform: rotateY(270deg) translateX(-100px); 
    transform-origin: center left; 
} 

.top { 
    opacity: 0.50; 
    background: @red; 
    transform: rotateX(-90deg) translateY(-109px); 
    transform-origin: top center; 
} 

.bottom { 
    opacity: 50; 
    border: 5px solid @red; 
    outline-style: single; 
    background: @red; 
    transform: rotateX(90deg) translateY(109px); 
    transform-origin: bottom center; 
} 

.front { 
    text-align: center; 
    color: rgb(173, 222, 247); 
    opacity: 0.50; 
    border: 2px solid @red; 
    outline-style: single; 
    background: @red; 
    transform: translateZ(109px); 
} 

.change-color { 
    color: #fff; 
    background-color: #f45642; 
    cursor: pointer; 
} 

.change-color:hover, 
.change-color:focus, 
.change-color:active { 
    color: #fff; 
    background-color: #f45642; 
    cursor: pointer; 
} 

example