css3地球自转,CSS3 月亮围绕地球转动的3D动画

CSS

语言：

CSSSCSS

确定

html {

height: 100%;

}

body {

height: 100%;

margin: 0;

background-color: #111;

}

body:after {

content: '';

display: block;

opacity: 0.5;

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

z-index: -10000;

background-image: url(http://www.hdwallpapersos.com/wp-content/uploads/2015/02/bright-galaxy.jpg);

background-size: cover;

background-repeat: no-repeat;

}

.earth {

width: 400px;

height: 400px;

position: absolute;

top: 50%;

left: 50%;

z-index: 100;

margin-top: -200px;

margin-left: -200px;

background-image: url(/uploads/150901/planet_x.png);

background-size: 400px;

}

.moon {

width: 133.33333px;

height: 133.33333px;

position: absolute;

top: 50%;

left: 50%;

z-index: 100;

margin-top: -66.66667px;

margin-left: -66.66667px;

background-image: url(/uploads/150901/planet_y.png);

background-size: 133.33333px;

animation-name: rotate;

animation-duration: 5s;

animation-iteration-count: infinite;

}

@keyframes rotate {

0% {

transform: matrix3d(0.9, 0, 0, 0, 0, 0.9, 0, 0, 0, 0, 1, 0, 270, 0, 0, 1);

z-index: 100;

}

1% {

transform: matrix3d(0.92093, 0, 0, 0, 0, 0.92093, 0, 0, 0, 0, 1, 0, 269.46722, 6.27905, 0, 1);

z-index: 100.06279;

}

2% {

transform: matrix3d(0.94178, 0, 0, 0, 0, 0.94178, 0, 0, 0, 0, 1, 0, 267.87097, 12.53332, 0, 1);

z-index: 100.12533;

}

3% {

transform: matrix3d(0.96246, 0, 0, 0, 0, 0.96246, 0, 0, 0, 0, 1, 0, 265.21756, 18.73813, 0, 1);

z-index: 100.18738;

}

4% {

transform: matrix3d(0.9829, 0, 0, 0, 0, 0.9829, 0, 0, 0, 0, 1, 0, 261.51745, 24.86899, 0, 1);

z-index: 100.24869;

}

5% {

transform: matrix3d(1.00301, 0, 0, 0, 0, 1.00301, 0, 0, 0, 0, 1, 0, 256.78526, 30.9017, 0, 1);

z-index: 100.30902;

}

6% {

transform: matrix3d(1.02271, 0, 0, 0, 0, 1.02271, 0, 0, 0, 0, 1, 0, 251.03965, 36.81246, 0, 1);

z-index: 100.36812;

}

7% {

transform: matrix3d(1.04193, 0, 0, 0, 0, 1.04193, 0, 0, 0, 0, 1, 0, 244.3033, 42.57793, 0, 1);

z-index: 100.42578;

}

8% {

transform: matrix3d(1.06058, 0, 0, 0, 0, 1.06058, 0, 0, 0, 0, 1, 0, 236.6028, 48.17537, 0, 1);

z-index: 100.48175;

}

9% {

transform: matrix3d(1.07861, 0, 0, 0, 0, 1.07861, 0, 0, 0, 0, 1, 0, 227.96854, 53.58268, 0, 1);

z-index: 100.53583;

}

10% {

transform: matrix3d(1.09593, 0, 0, 0, 0, 1.09593, 0, 0, 0, 0, 1, 0, 218.43459, 58.77853, 0, 1);

z-index: 100.58779;

}

11% {

transform: matrix3d(1.11247, 0, 0, 0, 0, 1.11247, 0, 0, 0, 0, 1, 0, 208.03858, 63.7424, 0, 1);

z-index: 100.63742;

}

12% {

transform: matrix3d(1.12818, 0, 0, 0, 0, 1.12818, 0, 0, 0, 0, 1, 0, 196.82153, 68.45471, 0, 1);

z-index: 100.68455;

}

13% {<