css3魔方3乘3每层旋转_CSS3动画之旋转魔方盒

1 ul{

2 margin:300px auto;

3 width:200px;

4 height:200px;

5 position:relative;

6 transform-style:preserve-3d;/*给子盒子开启3d*/

7 -webkit-transition:all 1s linear 0s;

8 -moz-transition:all 1s linear 0s;

9 -ms-transition:all 1s linear 0s;

10 -o-transition:all 1s linear 0s;

11 transition:all 1s linear 0s;

12 }

13 ul:hover{

14 -webkit-transform:rotateX(360deg) rotateY(360deg);

15 -moz-transform:rotateX(360deg) rotateY(360deg);

16 -ms-transform:rotateX(360deg) rotateY(360deg);

17 -o-transform:rotateX(360deg) rotateY(360deg);

18 transform:rotateX(360deg) rotateY(360deg);

19 }

20 ul li{

21 width:200px;

22 height:200px;

23 position:absolute;

24 background:pink;

25 top:0px; /*六个面叠合*/

26 left:0px;

27

28 }

29 li:nth-child(1){ /*上面*/

30 background:orange;

31 -webkit-transform:rotateX(90deg) translateZ(100px);

32 -moz-transform:rotateX(90deg) translateZ(100px);

33 -ms-transform:rotateX(90deg) translateZ(100px);

34 -o-transform:rotateX(90deg) translateZ(100px);

35 transform:rotateX(90deg) translateZ(100px);

36 }

37 li:nth-child(2){ /*下面*/

38 background:lightgreen;

39 -webkit-transform:rotateX(90deg) translateZ(-100px);

40 -moz-transform:rotateX(90deg) translateZ(-100px);

41 -ms-transform:rotateX(90deg) translateZ(-100px);

42 -o-transform:rotateX(90deg) translateZ(-100px);

43 transform:rotateX(90deg) translateZ(-100px);

44 }

45 li:nth-child(3){ /*左面*/

46 background:darksalmon;

47 -webkit-transform:rotateY(90deg) translateZ(100px);

48 -moz-transform:rotateY(90deg) translateZ(100px);

49 -ms-transform:rotateY(90deg) translateZ(100px);

50 -o-transform:rotateY(90deg) translateZ(100px);

51 transform:rotateY(90deg) translateZ(100px);

52 }

53 li:nth-child(4){ /*右面*/

54 background:lightskyblue;

55 -webkit-transform:rotateY(90deg) translateZ(-100px);

56 -moz-transform:rotateY(90deg) translateZ(-100px);

57 -ms-transform:rotateY(90deg) translateZ(-100px);

58 -o-transform:rotateY(90deg) translateZ(-100px);

59 transform:rotateY(90deg) translateZ(-100px);

60 }

61 li:nth-child(5){ /*前面*/

62 -webkit-transform:translateZ(100px);

63 -moz-transform:translateZ(100px);

64 -ms-transform:translateZ(100px);

65 -o-transform:translateZ(100px);

66 transform:translateZ(100px);

67 }

68 li:last-child{ /*后面*/

69 -webkit-transform:translateZ(-100px);

70 -moz-transform:translateZ(-100px);

71 -ms-transform:translateZ(-100px);

72 -o-transform:translateZ(-100px);

73 transform:translateZ(-100px);

74 }