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;
}
最佳答案
我以前从未研究过转换,但我尝试了一下,
在查看了您的 css 之后,我认为 .wrap
类应该具有 left
和 position
属性,因此添加了这些属性,并从 left
中删除了 .cube div
属性
我已经修改了你的代码
.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;
}
到
.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:
对于疯狂旋转修复,更改下面的代码
这里你没有提到0%的时间,动画要做什么,所以它变得疯狂,在达到5%的时间(0.5秒)后,它开始沿y轴旋转360
@keyframes spin {
5% {
transform: rotateY(360deg);
}
}
到
@keyframes spin {
0% {
transform: rotateY(360deg);
}
}
我改成0%,所以从头到尾会沿y轴旋转360度。
对于第二个框旋转问题,我没有深入研究,因为大多数类都是多余的,所以我删除了所有这些类。
@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;
}
关于html - CSS 动画的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40051834/