加载中...
PAGE

css3 按钮翻转效果

Post on 2021-10-27 18 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

mysql 树目录查询语句优化,提高查询效率

mysql 树目录查询语句优化,提高查询效率

阅读更多
微信小程序 简易的滑动选择框

微信小程序 简易的滑动选择框

阅读更多
docker 学习笔记记录

docker 学习笔记记录

阅读更多

暂无评论

    发表评论
    返回顶部
    X