css3实现翻转效果,css3 实现3D翻转效果

css3 实现3D翻转效果。

HTML源码：

前面内容，鼠标移到这，试试

用户名
密码

css源码：

/* entire container, keeps perspective */

.flip-container {

perspective: 1000;

transform-style: preserve-3d;

}

/* UPDATED! flip the pane when hovered */

.flip-container:hover .back {

transform: rotateY(0deg);

}

.flip-container:hover .front {

transform: rotateY(180deg);

}

.flip-container, .front, .back {

width: 320px;

height: 200px;

}

/* flip speed goes here */

.flipper {

transition: 0.6s;

transform-style: preserve-3d;

position: relative;

}

/* hide back of pane during swap */

.front, .back {

backface-visibility: hidden;

transition: 0.6s;

transform-style: preserve-3d;

position: absolute;

top: 0;

left: 0;

}

/* UPDATED! front pane, placed above back */

.front {

z-index: 2;

transform: rotateY(0deg);

background:yellow;

}

/* back, initially hidden pane */

.back {

transform: rotateY(-180deg);

background:red;

}

/*

Some vertical flip updates

*/

.vertical.flip-container {

position: relative;

}

.vertical .back {

transform: rotateX(180deg);

}

.vertical.flip-container:hover .back {

transform: rotateX(0deg);

}

.vertical.flip-container:hover .front {

transform: rotateX(180deg);

}