魔方html语言,CSS3 前端开发实现魔方

/p>

<

魔方

*{

margin:0;

padding:0;

}

.wrapper{

width:1000px;

height:600px;

/*background:#eee;*/

margin:20pxauto;

perspective:1000px;

-webkit-transform-style:preserve-3d;

-moz-transform-style:preserve-3d;

-ms-transform-style:preserve-3d;

transform-style:preserve-3d;

text-align:center;

transition:alllinear.7s;

position:relative;

}

.box{

-webkit-transform-style:preserve-3d;

-moz-transform-style:preserve-3d;

-ms-transform-style:preserve-3d;

transform-style:preserve-3d;

position:absolute;

width:200px;

height:200px;

top:200px;

left:400px;

transition:alllinear.7s;

animation: scaleWidth 10slinearinfinite;

}

@keyframesscaleWidth{

0% {

transform-origin:center;

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

}

100% {

transform-origin:center;

transform:rotateZ(-360deg)rotateX(-360deg)rotateY(-360deg);

}

}

.boxdiv{

width:198px;

height:198px;

text-align:center;

line-height:200px;

font-size:50px;

position:absolute;

/*opacity: .2;*/

animation: cwidth linear10s;

overflow:hidden;

}

@keyframescwidth{

0% {

width:0;

height:0;

}

100% {

width:198px;

height:198px;

}

}

.boxdivspan{

display:block;

width:62px;

height:62px;

border:1pxsolid#000;

margin:1px;

float:left;

}

.wrapper.boxdiv:nth-of-type(1){

left:0;

top:-200px;

transform-origin:bottom;

transform:rotateX(90deg);

}

.wrapper.boxdiv:nth-of-type(1)span{

background-color:red;

}

.wrapper.boxdiv:nth-of-type(2){

left:0;

top:0px;

transform:translateZ(0px);

}

.wrapper.boxdiv:nth-of-type(2)span{

background-color:yellow;

}

.wrapper.boxdiv:nth-of-type(3){

left:0;

top:200px;

transform-origin:top;

transform:rotateX(-90deg);

}

.wrapper.boxdiv:nth-of-type(3)span{

background-color:green;

}

.wrapper.boxdiv:nth-of-type(4){

left:-200px;

top:0px;

transform-origin:right;

transform:rotateY(-90deg);

}

.wrapper.boxdiv:nth-of-type(4)span{

background-color:deeppink;

}

.wrapper.boxdiv:nth-of-type(5){

left:200px;

top:0px;

transform-origin:left;

transform:rotateY(90deg);

}

.wrapper.boxdiv:nth-of-type(5)span{

background-color:cyan;

}

.wrapper.boxdiv:nth-of-type(6){

left:0px;

top:0px;

transform:translateZ(-200px)

}

.wrapper.boxdiv:nth-of-type(6)span{

background-color:purple;

}

1

2

3

4

5

6

7

8

9

1

2

3

4

5

6

7

8

9

1

2

3

4

5

6

7

8

9

1

2

3

4

5

6

7

8

9

1

2

3

4

5

6

7

8

9

1

2

3

4

5

6

7

8

9