http://codepen.io/Feners4/pen/KggAwgПроблемы с CSS Animation
Я хочу, чтобы кубики, чтобы оставаться на месте и вращаются на оси 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;
}
Спасибо за ваш ответ. Ваш ответ определенно помогает, но кубы все еще не остаются на месте, хотя это намного лучше с вашим методом. Кроме того, я не знаю, почему, когда вы сначала наводите курсор на куб, анимация идет с ума и очень быстро .. – feners
* Исправление ... Средний куб не остается на месте. Он слегка сдвигается слева направо .. – feners
Удивительный! Благодарим вас за подробный ответ. – feners