css3 按钮翻转效果

末蓝、 2022-09-03 07:19 260阅读 0赞

css3 按钮翻转效果  
![css3 按钮翻转][css3]  
![css3 按钮翻转][css3 1]  
![css3 按钮翻转][css3 2]

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 按钮翻转][css3 3]  
作者主页：[http://jsrun.net/u/fangbinwei/code][http_jsrun.net_u_fangbinwei_code]

[css3]: /images/20220829/92d6292a005c483e807313f51ab2460d.png
[css3 1]: /images/20220829/675a85fae8494d44b5823c1fde84726b.png
[css3 2]: /images/20220829/96275a37c04d4c66b625b0f6dcad1a65.png
[css3 3]: http://jsrun.net/PLiKp/edit
[http_jsrun.net_u_fangbinwei_code]: http://jsrun.net/u/fangbinwei/code

发表评论取消回复

表情：

评论列表（有 0 条评论，260人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS 蝙蝠侠按钮悬停效果

CSS 蝙蝠侠按钮悬停效果 ![在这里插入图片描述][22df46cef9cc490dae5e71d5fe158530.gif_pic_center] HTML 代码

桃扇骨/ 2023年10月14日 14:30/ 0 赞/ 51 阅读

相关 css制作按钮按下去效果

HTML <img src="./button.png" alt="" class="login" /> 图片： !

系统管理员/ 2023年02月15日 12:42/ 0 赞/ 270 阅读

相关 109.现代CSS按钮悬停效果

效果 (源码网盘地址在最后) ![c103c7135cddddb466596e59fa44fe26.gif][] 最近开源了一个 Vue 组件，还不够完善，欢迎大家来一

雨点打透心脏的1/2处/ 2022年12月23日 00:56/ 0 赞/ 135 阅读

相关 CSS3样式控制input按钮效果

.clearfix:before, .clearfix:after { display: table; content: " ";

待我称王封你为后i/ 2022年09月25日 12:21/ 0 赞/ 263 阅读

相关 swiper-翻页效果---3D翻转效果

本次内容我们继续介绍swiper当中的翻页效果---3D翻转效果首先搭建swiper页面，设置CSS样式，为了观看效果，这一章依然在slide当中添加背景图片。

妖狐艹你老母/ 2022年09月23日 04:00/ 0 赞/ 654 阅读

相关 css3 按钮翻转效果

css3 按钮翻转效果 ![css3 按钮翻转][css3] ![css3 按钮翻转][css3 1] ![css3 按钮翻转][css3 2] html

末蓝、/ 2022年09月03日 07:19/ 0 赞/ 261 阅读

相关网页按钮效果css3,css3按钮效果

/\ Box colors \/ .bg-1 \{ background:\ECEFF1; color:\37474f; \} /\ Common button st

た入场券/ 2022年09月02日 14:53/ 0 赞/ 245 阅读

相关 CSS3特效之翻转

![这里写图片描述][SouthEast] 鼠标悬停，图片翻转 ![这里写图片描述][SouthEast 1] <!doctype html> <html

港控/mmm°/ 2022年07月11日 07:46/ 0 赞/ 250 阅读

相关 css3实现图片3d翻转效果

1.html部分 <body> <div class="main"> <div class="w"> <div clas

梦里梦外;/ 2022年06月17日 10:24/ 0 赞/ 308 阅读

相关 css3 实现正反面翻转效果动画

分享一下正反面的翻转的动画效果的实现，使用了css3的一些属性；在目前的移动端中使用还是可以的，但是pc端需要注意IE的兼容问题；下面翻转了一个<p/>元素，没有使用图

淡淡的烟草味﹌/ 2022年03月14日 08:20/ 0 赞/ 966 阅读