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

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

1.html

 

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

​

2.css

 

1

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

 

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