css中按y轴怎么写,CSS3 简单的圆形Y轴（RotateY）变换

CSS

语言：

CSSSCSS

确定

html,

body {

height: 100%;

}

.science {

position: absolute;

width: 120px;

height: 120px;

top: 50%;

left: 50%;

margin: -60px 0 0 -60px;

transform: rotate(45deg);

}

.isthis {

width: 100%;

height: 100%;

transform: rotate(-45deg);

}

.thisisscienceiguess,

.andthisistoo,

.thisistooofcourse {

position: absolute;

display: block;

width: 100%;

height: 100%;

top: 0;

left: 0;

border-width: 4px;

border-style: solid;

border-radius: 100%;

opacity: 0.9;

}

.thisisscienceiguess {

border-color: #707c7d;

animation: center 2s ease-in-out infinite;

}

.andthisistoo {

border-color: #dd6822;

animation: top 2s ease-in-out infinite;

}

.thisistooofcourse {

border-color: #3bbfd6;

animation: bottom 2s ease-in-out infinite;

}

@keyframes center {

0% {

transform: rotateY(0deg);

}

50% {

transform: rotateY(90deg);

}

100% {

transform: rotateY(360deg);

}

}

@keyframes top {

0% {

transform: rotateY(0deg) rotateX(0deg);

}

50% {

transform: rotateY(90deg) rotateX(45deg);

}

100% {

transform: rotateY(360deg) rotateX(0deg);

}

}

@keyframes bottom {

0% {

transform: rotateY(0deg) rotateX(0deg);

}

50% {

transform: rotateY(90deg) rotateX(-45deg);

}

100% {

transform: rotateY(360deg) rotateX(0deg);

}

}