css3魔方3乘3每层旋转_纯CSS做3D旋转魔方

1

2

3

4

5

6

7 /*最外层容器样式*/

8 .wrap{

9 width:200px;

10 height:200px;

11 margin:200px;

12 position:relative;

13 }

14

15 /*包裹所有容器样式*/

16 .cube{

17 width:200px;

18 height:200px;

19 margin:0 auto;

20 transform-style:preserve-3d;

21 transform:rotateX(-30deg) rotateY(-80deg);

22 animation:rotate linear 20s infinite;

23 }

24

25 @-webkit-keyframes rotate{

26 from {27 transform:rotateX(0deg) rotateY(0deg);

28 }

29 to{

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

31 }

32 }33

34 .cube div{

35 position:absolute;

36 width:200px;

37 height:200px;

38 opacity:0.8;

39 transition:all .4s;

40 }

41

42 /*定义所有图片样式*/

43 .pic{

44 width:200px;

45 height:200px;

46 }

47

48 .cube .out_front{

49 transform:rotateY(0deg) translateZ(100px);

50 }

51

52 .cube .out_back{

53 transform:translateZ(-100px) rotateY(180deg);

54 }

55

56 .cube .out_left{

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

58 }

59

60 .cube .out_right{

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

62 }

63

64 .cube .out_top{

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

66 }

67

68 .cube .out_bottom{

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

70 }

71

72 /*定义小正方体样式*/

73 .cube span{

74 display:block;

75 width:100px;

76 height:100px;

77 position:absolute;

78 top:50px;

79 left:50px;

80 }

81

82 .cube .in_pic{

83 width:100px;

84 height:100px;

85 }

86

87 .cube .in_front{

88 transform:rotateY(0deg) translateZ(50px);

89 }

90

91 .cube .in_back{

92 transform:translateZ(-50px) rotateY(180deg);

93 }

94

95 .cube .in_left{

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

97 }

98

99 .cube .in_right{

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

101 }

102

103 .cube .in_top{

104 transform:rotateX(90deg) translateZ(50px);

105 }

106

107 .cube .in_bottom{

108 transform:rotateX(-90deg) translateZ(50px);

109 }

110

111 /*鼠标移入后样式*/

112 .cube:hover .out_front{

113 transform:rotateY(0deg) translateZ(200px);

114 }

115

116 .cube:hover .out_back{

117 transform:translateZ(-200px) rotateY(180deg);

118 }

119

120 .cube:hover .out_left{

121 transform:rotateY(-90deg) translateZ(200px);

122 }

123

124 .cube:hover .out_right{

125 transform:rotateY(90deg) translateZ(200px);

126 }

127

128 .cube:hover .out_top{

129 transform:rotateX(90deg) translateZ(200px);

130 }

131

132 .cube:hover .out_bottom{

133 transform:rotateX(-90deg) translateZ(200px);

134 }

135

136

137

138

139

140

141

142

143

144

145

146