CSS3 3d快乐星球

效果

实现不断转动的效果

第一步：
首先我们来画没加3d的效果图
1.我们画一个大圆 ，通过boder-radius：50%画圆，
2.大圆采用相对定位，小圆采用绝对定位
3.在小园内再加几个不同边框颜色的小圆
5.在复制几个小圆通过绝对定位平均分配到大圆的个个位置上实现以下的效果
6.用box-shadow为大圆设置边框阴影实现以下效果

Html结构

<div id="box">
     
    <div id="son1">
        <div id="son_a">
            <div id="son_b">
                <div id="son_c">div>
            div>
        div>
    div>
       
    <div id="son2">
        <div id="son_a">
            <div id="son_b">
                <div id="son_c">div>
            div>
        div>
    div>
      
    <div id="son3">
        <div id="son_a">
            <div id="son_b">
                <div id="son_c">div>
            div>
        div>
    div>
div>

css样式

#box{
     
        width: 1000px;
        height: 1000px;
        border: 6px solid aqua;
        left: calc(50% - 500px);   /*让改盒子横向居中*/
        top: calc(50% - 500px);	   /*让改盒子纵向居中*/
        position: relative;   
        box-shadow: 0px 0px 60px 20px aqua,   /*边框阴影*/
                    inset 0px 0px 30px 10px aqua;
    }
    #son1{
     
        width: 100px;
        height: 100px;
        border: 1px solid gold;
        position: absolute;
        left: 220px;
        top: 20px;
    }
	#son2{
     
        position: absolute;
        left: 10px;
        top: 700px;
        border: 1px solid gold;
    }
    #son3{
     
        position: absolute;
        left: 909px;
        top: 646px;
        border: 1px solid gold;
    }

    #son_a{
     
        border: 1px solid red;
        height: 98px;
        width: 98px;
    }
    #son_b {
     
        border: 1px solid aqua;
        height: 96px;
        width: 96px;
    }
    #son_c{
     
        border: 1px solid green;
        height: 94px;
        width: 94px;
    }

第二步：
给该样式加入css3动画
1.首先给body设置一个3d视距 perspective：800px
2.给使用到3d的元素加入一个transfrom：preservse-3d
3.给外面的大盒子设置一个最开始的绕X轴旋转的角度。
4.用animation设置对应的关键帧动画。
5.在@keyfroms run{ 。。。。}设置对应的帧动画内容。
6.通过transfrom属性设置对应的X，Y，Z轴的在一定时间内的偏转角度。
7.效果每个圆设置一个动画行成了都在旋转的效果。

CSS加入内容

给box加入：  
transform: rotateX(80deg) rotateZ(0deg)  ;
animation: run3 10s  steps(1000,end) infinite;

给son1 son2 son3 加入：
transform: rotateY(0deg);
animation: run2 4s  steps(1000,end) infinite;

给son_a加入：
transform: rotateX(0deg);
animation: run1 3s  steps(1000,end) infinite ;
son_b加入：
transform: rotateY(0deg);
animation: run2 2s  steps(1000,end) infinite ;
son_c加入：
transform: rotateX(0deg);
animation: run1 1s  steps(1000,end) infinite ;

@keyframes run1{
     
    0%{
     }
    100%{
      transform: rotateX(360deg);}
}
@keyframes run2{
     
    0%{
     }
    100%{
      transform: rotateY(360deg);}
}
  @keyframes run3{
     
    0%{
         transform: rotateX(80deg) rotateZ(0deg) ;}
    100%{
      transform: rotateX(80deg) rotateZ(360deg) ;}
} 

写到这我想在加一个竖着的轴大家改个角度复制一遍就完成了！