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、书写小正方形c衡痕贤伎ss代码。@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、查看效果。