设计思路：
首先使用图像和标题制作一个简单的页面结构，然后设置其转换。 将变换后的元素，即照片和文字放在一个父容器上，这就需要四个父容器，然后将这四个父容器放在最里面的stage前面进行变换，并在每个父容器上包含两部分：一是里面的图片，另一个是下面的说明文字。 最后利用图层定位，让图片和下面的说明文字有叠加的效果。 首先显示这张图片，当鼠标悬停在前面时，因为3D变换（即翻转每张图片的效果是绕Y轴旋转180度），会显示旁边的文字。
(1) HTML主页文件的基本结构
首先制作一个需要变换元素的整个结构。 最内层有一个舞台，放置在一个包上，舞台名为“piclist”。 由于当前stage只使用了一个stage，所以用ID来引用，用“#”来定义。 舞台上需要变换的元素有四组。 制作 4 个袋子作为父容器，并给父容器命名。 它被称为“picbox”，类用于指代这种样式。 有两个元素需要在父容器上进行转换。 正面部分载有图片，反面部分载有说明文字。 正面和背面都有一个共同的样式，它们的共同样式被类引用，并放置在面等共同样式上。 正面的图片有单独的样式，通过将其放置在诸如front这样的样式之上来引用； 背面的文字也有单独的样式，通过将其放在背面的顶部来引用。 这是父容器的当前结构。 我们再次在容器上设置图片和文字的内容，其中图片添加了相对路径。
我们来简单设置CSS样式部分：首先清除默认样式，将页面背景色设置为深红色，直接设置在body标签上。
目前基本的结构和样式已经搭建完毕，我们来看看代码是如何编译的。
下面是代码部分：
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>
疗效图如下：
(2)CSS样式设置后展开的效果
在基础里面，细化风格。 首先设置舞台的样式：设置舞台的高度和长度，即舞台的大小，这个数字是根据上面元素的大小来设置的。 设置舞台位置：垂直距离顶部100pxcss3圆形图片，水平方向居中。 设置四个父容器的样式：将四个父容器排成一排作为一个包，设置它们的浮动向左，然后设置它们的高度、长度、外距，最重要的是，因为父元素需要将上面需要变换的内容包含进去，设置3D变换（在编辑器上由trsf扩展生成），将其值设置为preserve-3d，这些变换不是一下子全部变换的，而是渐进变换，设置transition，让它转换在1.5秒内完成，这是父容器的初始设置。
设置当键盘悬停在父容器前面时要执行的 3D 变换：沿 Y 轴翻转 180 度。 父容器上需要变换的两个元素与麻将牌的两侧效果相同。 设置脸部的样式是这样的：先设置高度和宽度，然后设置图片放在前面的那一侧的样式，并将其边框设置为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>
疗效图如下：
★当前图片和文字都已经设置好了，但是键盘悬停在里面也能实现逐行翻转的效果，存在两个问题：
⑴图文关系不产生正反面关系；
⑵当鼠标悬停在正面时，你会发现背面的文字已经颠倒了，相当于字写反了。
★我们最终想要达到的疗效是当前不可逆转的疗效，那么该怎么做呢？
在初始状态下将文本翻转到反面，当鼠标停留在正面时，会再次翻转回来，这样就产生了正常词序的文本。
(三)完整疗效代码
设置图层定位。 需要在父元素，即父容器上设置它的图层定位方式。 将父元素设置为相对定位。 无论子元素是front还是back，都应该是绝对定位，然后将back设置为初始状态。 翻转，使初始状态翻转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>
疗效图如下：
因为使用了分层定位，父元素是相对定位css3圆形图片，而两个子元素相对于父元素是绝对定位，这意味着两个子元素原来的文档流位置丢失了，所以它们仍然会堆叠在一起，但是在初始状态下，我们已经将文本翻转了180度，这样当光标停留在前面时，它又翻转回来，这就产生了最终的效果。
上面是css3中3D变换的例子——鼠标悬停在图片上，翻转反面文字描述的所有代码和疗效。 希望有帮助。
