加载中...
PAGE

css3 按钮翻转效果

Post on 2021-10-27 104 0

css3 按钮翻转效果
css3 按钮翻转
css3 按钮翻转
css3 按钮翻转

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>

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 按钮翻转
作者主页:http://jsrun.net/u/fangbinwei/code

js 10分钟学会隐式转换

js 10分钟学会隐式转换

阅读更多
mysql INSERT SELECT FROM 语句的使用

mysql INSERT SELECT FROM 语句的使用

阅读更多
css 背景图片自适应属性整理

css 背景图片自适应属性整理

阅读更多

暂无评论

    发表评论
    返回顶部
    X