html块中心轴旋转,CSS3如何实现水平轴上的旋转（附代码）

使用CSS3可以以三维方式在其水平/垂直轴上旋转DOM元素。本篇文章就给大家来分享关于CSS3实现在水平轴上旋转的方法，有感兴趣的朋友可以看一看

我们直接进入正文

HTML代码是：

Barack

5397

Honolulu
August 4, 1961

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;.。