1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>CSS3制作3D图片立方体旋转特效 - 站长素材</title> 6 7 <style type="text/css"> 8 9 html{ 10 background:linear-gradient(#ff0 0%,#F00 80%); 11 height: 100%; 12 } 13 14 .wrap{ 15 width: 650px; 16 height: 200px; 17 margin: 150px 360px; 18 position: relative; 19 20 } 21 .cube{ 22 width: 200px; 23 height: 200px; 24 margin: 0 auto; 25 transform-style: preserve-3d; 26 transform: rotateX(-30deg) rotateY(-80deg); 27 -webkit-animation: rotate 20s infinite; 28 animation-timing-function: linear; 29 } 30 @-webkit-keyframes rotate{ 31 from{transform: rotateX(0deg) rotateY(0deg);} 32 to{transform: rotateX(360deg) rotateY(360deg);} 33 } 34 .cube div{ 35 position: absolute; 36 width: 200px; 37 height: 200px; 38 opacity: 0.8; 39 transition: all .4s; 40 } 41 .pic{ 42 width: 200px; 43 height: 200px; 44 } 45 .cube .out_front{ 46 transform: rotateY(0deg) translateZ(100px); 47 } 48 .cube .out_back{ 49 transform: translateZ(-100px) rotateY(180deg); 50 } 51 .cube .out_left{ 52 transform: rotateY(90deg) translateZ(100px); 53 } 54 .cube .out_right{ 55 transform: rotateY(-90deg) translateZ(100px); 56 } 57 .cube .out_top{ 58 transform: rotateX(90deg) translateZ(100px); 59 } 60 .cube .out_bottom{ 61 transform: rotateX(-90deg) translateZ(100px); 62 } 63 .cube span{ 64 display: bloack; 65 width: 100px; 66 height: 100px; 67 position: absolute; 68 top: 50px; 69 left: 50px; 70 } 71 .cube .in_pic{ 72 width: 100px; 73 height: 100px; 74 } 75 .cube .in_front{ 76 transform: rotateY(0deg) translateZ(50px); 77 } 78 .cube .in_back{ 79 transform: translateZ(-50px) rotateY(180deg); 80 } 81 .cube .in_left{ 82 transform: rotateY(90deg) translateZ(50px); 83 } 84 .cube .in_right{ 85 transform: rotateY(-90deg) translateZ(50px); 86 } 87 .cube .in_top{ 88 transform: rotateX(90deg) translateZ(50px); 89 } 90 .cube .in_bottom{ 91 transform: rotateX(-90deg) translateZ(50px); 92 } 93 .cube:hover .out_front{ 94 transform: rotateY(0deg) translateZ(200px); 95 } 96 .cube:hover .out_back{ 97 transform: translateZ(-200px) rotateY(180deg); 98 } 99 .cube:hover .out_left{ 100 transform: rotateY(90deg) translateZ(200px); 101 } 102 .cube:hover .out_right{ 103 transform: rotateY(-90deg) translateZ(200px); 104 } 105 .cube:hover .out_top{ 106 transform: rotateX(90deg) translateZ(200px); 107 } 108 .cube:hover .out_bottom{ 109 transform: rotateX(-90deg) translateZ(200px); 110 } 111 </style> 112 113 </head> 114 <body> 115 <!--/*外层最大容器*/--> 116 <div class="wrap"> 117 <!-- /*包裹所有元素的容器*/--> 118 <div class="cube"> 119 <!--前面图片 --> 120 <div class="out_front"> 121 <img src="../aimg/食材1.jpg" class="pic"> 122 </div> 123 <!--后面图片 --> 124 <div class="out_back"> 125 <img src="../aimg/食材2.jpg" class="pic"> 126 </div> 127 <!--左图片 --> 128 <div class="out_left"> 129 <img src="../aimg/食材3.jpg" class="pic"> 130 </div> 131 <div class="out_right"> 132 <img src="../aimg/食材4.jpg" class="pic"> 133 </div> 134 <div class="out_top"> 135 <img src="../aimg/食材5.jpg" class="pic"> 136 </div> 137 <div class="out_bottom"> 138 <img src="../aimg/食材6.jpg" class="pic"> 139 </div> 140 <!--小正方体 --> 141 <span class="in_front"> 142 <img src="../aimg/食材7.jpg" class="in_pic" /> 143 </span> 144 <span class="in_back"> 145 <img src="../aimg/食材8.jpg" class="in_pic" /> 146 </span> 147 <span class="in_left"> 148 <img src="../aimg/食材9.jpg" class="in_pic" /> 149 </span> 150 <span class="in_right"> 151 <img src="../aimg/食材10.jpg" class="in_pic" /> 152 </span> 153 <span class="in_top"> 154 <img src="../aimg/食材11.jpg" class="in_pic" /> 155 </span> 156 <span class="in_bottom"> 157 <img src="../aimg/食材12.jpg" class="in_pic" /> 158 </span> 159 </div> 160 </div>