css3正方形内小正方形相反方向转动

1、新建html文档。

2、书写hmtl代码。

<div class="lifangti">

 <div class="beform bgabox"></div>

 <div class="afterm bgabox"></div>

 <div class="leftm bgabox"></div>

 <div class="rightm bgabox"></div>

 <div class="topm bgabox"></div>

 <div class="bottomm bgabox"></div>

 <div class="lifangtimin">

  <div class="beformm"></div>

  <div class="aftermm"></div>

  <div class="leftmm"></div>

  <div class="rightmm"></div>

  <div class="topmm"></div>

  <div class="bottommm"></div>

 </div>

</div>

3、书写外部正方形css代码。

.lifangti { transform: rotateX(-33.5deg) rotateY(45deg); transform-origin: 50px 0px; transform-style: preserve-3d; -web   kit-transform: rotateX(-33.5deg) rotateY(45deg); -web   kit-transform-origin: 50px 0px; -web   kit-transform-style: preserve-3d; -moz-transform: rotateX(-33.5deg) rotateY(45deg); -moz-transform-origin: 50px 0px; top: 50%; left: 50%; margin: -100px 0 0 -50px; position: absolute; display: block; anim  ation: xuanzhuan 5s infinite ease; -moz-anim  ation: xuanzhuan 5s infinite ease; /* Firefox */ -web   kit-anim  ation: xuanzhuan 5s infinite ease; /* Safari 和 Chrome */ -o-anim  ation: xuanzhuan 5s infinite ease; }

.lifangti > .bgabox { width: 100px; height: 100px; position: absolute; opacity: 0.6; }

.leftm { background-color: #ff6a00; transform: rotateY(90deg) translateZ(-50PX); -moz-transform: rotateY(90deg) translateZ(-50PX); -web   kit-transform: rotateY(90deg) translateZ(-50PX); }

.rightm { background-color: #6faed9; transform: rotateY(90deg) translateZ(50px); -moz-transform: rotateY(90deg) translateZ(50px); -web   kit-transform: rotateY(90deg) translateZ(50px); }

.topm { transform: rotateX(90deg) translateZ(50px); -moz-transform: rotateX(90deg) translateZ(50px); -web   kit-transform: rotateX(90deg) translateZ(50px); background-color: #ff0000; opacity: 1; }

.bottomm { transform: rotateX(90deg) translateZ(-50px); -moz-transform: rotateX(90deg) translateZ(-50px); -web   kit-transform: rotateX(90deg) translateZ(-50px); background-color: #52d538; }

.beform { background-color: #b12d9e; transform: translateZ(50px); -moz-transform: translateZ(50px); -web   kit-transform: translateZ(50px); }

4、书写小正方形css代码。

 @keyframes xuanzhuan {  from {

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

 -web   kit-transform: rotateX(-33.5deg) rotateY(45deg);

 -moz-transform: rotateX(-33.5deg) rotateY(45deg);

}

to { transform: rotateX(-33.5deg) rotateY(765deg); -web   kit-transform: rotateX(-33.5deg) rotateY(765deg); -moz-transform: rotateX(-33.5deg) rotateY(765deg); }

}

.lifangtimin { transform-origin: 25px 0px; transform-style: preserve-3d; -web   kit-transform-origin: 25px 0px; top: 50%; margin: -50px 0 0 -25px; position: absolute; display: block; transform: translateX(50px) translateY(75px) rotateY(0deg); -web   kit-transform: translateX(50px) translateY(75px) rotateY(0deg); -moz-transform: translateX(50px) translateY(75px) rotateY(0deg); anim  ation: xuanzhuanm 5s infinite ease; -moz-anim  ation: xuanzhuanm 5s infinite ease; /* Firefox */ -web   kit-anim  ation: xuanzhuanm 5s infinite ease; /* Safari 和 Chrome */ -o-anim  ation: xuanzhuanm 5s infinite ease;}

.lifangtimin > div { width: 50px; height: 50px; position: absolute; opacity: 1; }

.leftmm { background-color: #ff6a00; transform: rotateY(90deg) translateZ(-25px); -web   kit-transform: rotateY(90deg) translateZ(-25px); -moz-transform: rotateY(90deg) translateZ(-25px); }

.rightmm { background-color: #6faed9; transform: rotateY(90deg) translateZ(25px); -web   kit-transform: rotateY(90deg) translateZ(25px); -moz-transform: rotateY(90deg) translateZ(25px); }

.topmm { transform: rotateX(90deg) translateZ(25px); -web   kit-transform: rotateX(90deg) translateZ(25px); -moz-transform: rotateX(90deg) translateZ(25px); background-color: #ff0000; opacity: 1; }

.bottommm { transform: rotateX(90deg) translateZ(-25px); -web   kit-transform: rotateX(90deg) translateZ(-25px); -moz-transform: rotateX(90deg) translateZ(-25px); background-color: #52d538; }

.beformm { background-color: #b12d9e; transform: translateZ(25px); -web   kit-transform: translateZ(25px); -moz-transform: translateZ(25px); }

.aftermm { background-color: #138fc6; transform: translateZ(-25px); -web   kit-transform: translateZ(-25px); -moz-transform: translateZ(-25px); }

 @keyframes xuanzhuanm {  from {

 transform: translateX(50px) translateY(75px) rotateY(0deg);

 -web   kit-transform: translateX(50px) translateY(75px) rotateY(0deg);

 -moz-transform: translateX(50px) translateY(75px) rotateY(0deg);

}

to { transform: translateX(50px) translateY(75px) rotateY(-1080deg); -web   kit-transform: translateX(50px) translateY(75px) rotateY(-1080deg); -moz-transform: translateX(50px) translateY(75px) rotateY(-1080deg); }

}

5、代码整体结构。

6、查看效果。