CSS3如何实现水平轴上的旋转（附代码）

我们直接进入正文

HTML代码是：

<div id="obama" class="f2_container">
 <div class="f2_card shadow">
 <div class="front2 face2">
 <dl>
 <dt class="label">Barack</dt>
 <dd class="amount">5397</dd>
 </dl>
 </div>
 <div class="back2 face2 center2">
 <p>Honolulu<br>August 4, 1961</p>
 </div>
 </div>
</div>

CSS代码是：

.f2_container{
 position: relative;
 width: 140px;
 height: 80px;
 z-index: 1;
 -webkit-transition: all 0.4s linear; /* Saf3.2+, Chrome */
 -moz-transition: all 0.4s linear; /* FF4+ */
 -o-transition: all 0.4s linear; /* Opera 10.5+ */
 transition: all 0.4s linear;
 perspective: 1000;
 -webkit-perspective: 1000; /* Saf4+, Chrome 12+ */ 
 -moz-perspective: 1000; /* FF10+ */
 -ms-perspective: 1000; /* IE10+ */
 perspective: 1000; 
 }
 .f2_card {
 width: 100%;
 height: 100%;
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 -ms-transform-style: preserve-3d;
 transform-style: preserve-3d;
 -webkit-transition: all 0.4s linear; /* Saf3.2+, Chrome */
 -moz-transition: all 0.4s linear; /* FF4+ */
 -o-transition: all 0.4s linear; /* Opera 10.5+ */
 transition: all 0.4s linear;
 }
 .f2_container:hover .f2_card {
 -webkit-transform: rotateX(180deg);
 -moz-transform: rotateX(180deg);
 -ms-transform: rotateX(180deg);
 transform: rotateX(180deg);
 }
 .face2 {
 position: absolute;
 width: 100%;
 height: 100%;
 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 -ms-backface-visibility: hidden;
 backface-visibility: hidden;
 display: block;
 }
 .face2.back2 {
 display: block;
 -webkit-transform: rotateY(180deg);
 -moz-transform: rotateY(180deg);
 -ms-transform: rotateY(180deg);
 transform: rotateY(180deg);
 -webkit-box-sizing: border-box; /* prev iOS4, prev Android 2.3 */
 -moz-box-sizing: border-box; /* FF1+ */
 box-sizing: border-box; /* Chrome, IE8, Opera, Safari 5.1*/
 }

需要注意的重要特性是transition: all 0.4s linear; | transform-style：preserve-3d; | transform：rotateX（180deg）; | backface-visibility: hidden;.。