css3动画绕y轴无限旋转,CSS3 transform:rotateX/rotateY 简单的图标翻转加载动画

CSS

语言：

CSSSCSS

确定

body {

background-color: #111;

}

.mrloader .inner-loader {

position: absolute;

left: 50%;

top: 50%;

z-index: 1;

-webkit-transform: translateX(-50%) translateY(-50%);

transform: translateX(-50%) translateY(-50%);

-webkit-perspective: 100px;

perspective: 100px;

}

.mrloader .inner-text {

top: 50%;

}

.mrloader .side {

background: url("/uploads/150201/icon-android.png");

height: 100px;

width: 100px;

background-size: cover;

-webkit-animation: rotate-side 3s infinite ease-in-out;

animation: rotate-side 3s infinite ease-in-out;

}

@-webkit-keyframes rotate-side {

0% {

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

}

40% {

-webkit-transform: rotateX(735deg) rotateY(0deg);

}

47%,

50% {

-webkit-transform: rotateX(720deg) rotateY(0deg);

}

90% {

-webkit-transform: rotateX(720deg) rotateY(735deg);

}

97%,

100% {

-webkit-transform: rotateX(720deg) rotateY(720deg);

}

}

@keyframes rotate-side {

0% {

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

}

40% {

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

}

47%,

50% {

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

}

90% {

transform: rotateX(720deg) rotateY(735deg);

}

97%,

100% {

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

}

}