网页特效：用CSS3制作3D图片立方体旋转特效 

  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>

 

posted @ 2016-10-14 11:45  Strive-count  阅读(1281)  评论(0)    收藏  举报