Design ideas :
First, do a simple page structure includes pictures and captions, and then set its transformation. The elements of transformation, photos and text that is placed inside a parent container, which requires four parent container, then put the four outermost parent container above the stage is transformed, in which each parent container includes two parts: one is the picture above, there is a caption below. Finally layer is positioned below the picture and caption it has an overlay effect. This image to display when the mouse over time, as do the 3D transformation, (i.e., reversing the effect of each picture is rotated 180 degrees about the Y axis is performed), then the back of the text will be displayed.
The basic structure of the home page file ㈠HTML
First a need to change the entire structure of one of its elements. The outermost have a stage, in a box inside, to stage a name, called "piclist". Due to the current stage only used one on the use of ID to be referenced with a "#" is defined, the stage there are four groups of elements need to transform four boxes do as a parent container, the parent container a name, called "picbox", the use of class to reference the style, the parent container element which has two parts need to transform into the front part of the picture, placed in the back part of the text. Front and back have a common style, they are common to refer to the style with class, style on a common face of such inside. Positive pictures have a separate style, put it in a style to refer to such a front inside; the back of the text also has a separate style, put it back inside to reference. This is the current structure of the parent container. We then set about the contents of the container inside images and text, which uses relative paths to add pictures.
We simply set about CSS Style section: First, the default style is cleared, the background color of the page dark blue, set directly on the body tag inside.
The current basic structure and style have been set up over, let's look at how the code is written.
The following is the code section:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 *{
8 padding: 0;
9 margin: 0;
10 }
11 body{
12 background-color:#0D3462;
13 }
14
15 </style>
16 </head>
17 <body>
18 <div id="piclist">
19 <div class="picbox">
20 <div class="face front"><img src="images/1.jpg"></div>
21 <div class="face back"><h3>浓缩咖啡</h3></div>
22 </div>
23 <div class="picbox">
24 <div class="face front"><img src="images/2.jpg"></div>
25 <div class="face back"><h3>卡布奇诺</h3></div>
26 </div>
27 <div class="picbox">
28 <div class="face front"><img src="images/3.jpg"></div>
29 <div class="face back"><h3>拿铁</h3></div>
30 </div>
31 <div class="picbox">
32 <div class="face front"><img src="images/4.jpg"></div>
33 <div class="face back"><h3>摩卡</h3></div>
34 </div>
35 </div>
36 </body>
37 </html>
The effect is as follows:
After ㈡CSS styling expansion effect
On the basis of the above refined style look. First, set the stage for the style: set the stage height, width, that is, the size of the stage, this figure is based on the size of the elements inside the set. Stage set position: from the margin has 100px distance in the vertical direction, the horizontal direction is centered. The parent container is provided four patterns: four parent container as a box, arranged in a row, are disposed to the left of the floating float, then set their height, width, margins, and most importantly, because it requires inside the parent element need to change the contents comprising, disposed 3D transform (which uses the editor trsf expansion), its value is set to preserve-3d, this transformation is not suddenly transform over, but progressive conversion, provided Transition, so it completed conversion in 1.5s, which is the initial setting for the parent container.
设置在父容器里面鼠标悬停在上面的时候来进行的3D变换：沿着Y轴翻转180度。父容器里面两个需要变换的元素，它们共同的效果就像扑克牌的两面一样。那么来设置face的样式：先设置高和宽，进一步设置正面放置图片的这一面的样式，设置它的边框为2个像素实线，为了配合咖啡的颜色，设置边框颜色为棕色，再设置背面的样式，设置它的背景颜色是咖啡色，边框为2个像素，实线，白色来显示，背面的文字用白色显示，文本内容水平居中。
下面是CSS样式设置后的代码：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 *{
8 padding: 0;
9 margin: 0;
10 }
11 body{
12 background-color:#0D3462;
13 }
14 /*舞台*/
15 #piclist{
16 width:760px; /*170*4+10*8*/
17 height: 220px;/*190+边框*/
18 margin: 100px auto;
19 }
20 /*容器*/
21 .picbox{
22 float: left;
23 /*position: relative;*/
24 width: 170px;
25 height: 190px;
26 margin: 10px;
27 /*3d——双面效果*/
28 transform-style:preserve-3d;
29 transition:1.5s;
30 }
31 /*舞台鼠标悬停，就翻转，
32 正面背面互换*/
33 .picbox:hover{
34 transform:rotateY(180deg);
35 }
36 .face{
37 /*position: absolute;*/
38 width:170px;
39 height:190px;
40 }
41 .front{
42 border:2px solid #4b2518;
43 }
44 .back{
45 /*让它成为背面，开始只显示正面*/
46 /*transform:rotateY(180deg); */
47 background-color: #4b2518;
48 border:2px solid #fff;
49 }
50 .back h3{
51 color:white;
52 text-align:center;
53 }
54 </style>
55 </head>
56 <body>
57 <div id="container">
58 <div id="piclist">
59 <div class="picbox">
60 <div class="face front"><img src="images/1.jpg"></div>
61 <div class="face back"><h3>浓缩咖啡</h3></div>
62 </div>
63 <div class="picbox">
64 <div class="face front"><img src="images/2.jpg"></div>
65 <div class="face back"><h3>卡布奇诺</h3></div>
66 </div>
67 <div class="picbox">
68 <div class="face front"><img src="images/3.jpg"></div>
69 <div class="face back"><h3>拿铁</h3></div>
70 </div>
71 <div class="picbox">
72 <div class="face front"><img src="images/4.jpg"></div>
73 <div class="face back"><h3>摩卡</h3></div>
74 </div>
75 </div>
76 </div>
77 </body>
78 </html>
效果图如下：
★ 当前的图片和文字已经设置好，而且鼠标悬停在上面也有渐进翻转的效果，但是有两个问题：
⑴图片和文字的关系没有形成正反面的关系；
⑵当鼠标悬停在上面的时候，会发现背面的文字已经被翻转过来，相当于反着写的字。
★我们最后要实现的效果是当前没有翻转的效果，那么如何做到这一点呢？
将背面的文字初始状态下就先翻转一下，当鼠标停留在上面的时候，它又被翻转回来，那么就形成正常字序的文字了。
㈢完整效果代码
设置层定位。需要在父元素，也就是父容器里面设置它的层定位的方式，将父元素设置成相对定位，子元素无论是正面还是背面，它都应该是一个绝对定位，再将背面设置成初始状态就是翻转的，那么让初始状态下翻转180度。
完整的代码如下面所示:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 *{
8 padding: 0;
9 margin: 0;
10 }
11 body{
12 background-color:#0D3462;
13 }
14 /*舞台*/
15 #piclist{
16 width:760px; /*170*4+10*8*/
17 height: 220px;/*190+边框*/
18 margin: 100px auto;
19 }
20 /*容器*/
21 .picbox{
22 float: left;
23 position: relative;
24 width: 170px;
25 height: 190px;
26 margin: 10px;
27 /*3d——双面效果*/
28 transform-style:preserve-3d;
29 transition:1.5s;
30 }
31 /*舞台鼠标悬停，就翻转，
32 正面背面互换*/
33 .picbox:hover{
34 transform:rotateY(180deg);
35 }
36 .face{
37 position: absolute;
38 width:170px;
39 height:190px;
40 }
41 .front{
42 border:2px solid #4b2518;
43 }
44 .back{
45 /*让它成为背面，开始只显示正面*/
46 transform:rotateY(180deg);
47 background-color: #4b2518;
48 border:2px solid #fff;
49 }
50 .back h3{
51 color:white;
52 text-align:center;
53 }
54 </style>
55 </head>
56 <body>
57 <div id="container">
58 <div id="piclist">
59 <div class="picbox">
60 <div class="face front"><img src="images/1.jpg"></div>
61 <div class="face back"><h3>浓缩咖啡</h3></div>
62 </div>
63 <div class="picbox">
64 <div class="face front"><img src="images/2.jpg"></div>
65 <div class="face back"><h3>卡布奇诺</h3></div>
66 </div>
67 <div class="picbox">
68 <div class="face front"><img src="images/3.jpg"></div>
69 <div class="face back"><h3>拿铁</h3></div>
70 </div>
71 <div class="picbox">
72 <div class="face front"><img src="images/4.jpg"></div>
73 <div class="face back"><h3>摩卡</h3></div>
74 </div>
75 </div>
76 </div>
77 </body>
78 </html>
效果图如下：
由于用了层定位，那么父元素是相对定位，两个子元素都是相对于父元素的一个绝对定位，所以意味着两个子元素原有文档流的位置丢失，那么它们就会层叠在一起，而且初始状态下，我们就已经将文字翻转180度，那么光标停留在上面的时候，它又被翻转回来，就形成了最终的效果。
以上就是css3中3D变换的示例——鼠标悬停在图片上翻转背面的文字说明的全部代码和效果图。希望有所帮助。