直播系统源代码，css3 按钮翻转效果

直播系统源代码，css3 按钮翻转效果

1.html

 

<div class="flipper">
<span class="flipper-object flipper-vertical">
<span class="panel front">the front</span>
<span class="panel back">the back</span>
</span>
</div>

​

2.css

 

.flipper {
position: relative;
width: 300px;
height: 44px;
perspective: 300px;
}
.flipper-object {
position:absolute;
transition: transform 1s;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.panel {
border: 1px solid black;
position: absolute;
backface-visibility: hidden;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.flipper-vertical .back {
transform: rotateX(180deg);
}
.flipper:hover .flipper-vertical {
transform: rotateX(180deg);
}

 

以上就是 直播系统源代码，css3 按钮翻转效果，更多内容欢迎关注之后的文章