<!DOCTYPE html>
<html>
<head>
<title>Flip Button</title>
<style>
.flip-button {
/* 设置翻转按钮的大小，包括宽度（width）和高度（height） */
width: 240px;
height: 60px;
/* 为 transform 属性设置过渡效果，作用时间为 0.8s */
transition: transform 0.8s;
-webkit-transition: -webkit-transform 0.8s;
/* 规定在三维空间中保留嵌套元素的空间位置 */
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.flip-button:hover {
/* 当鼠标悬停在按钮上时，沿着 X 轴旋转 180° */
transform: rotateX(180deg);
}
.front-button {
/* 设置定位方式为 absolute */
position: absolute;
/* 沿着 X 轴翻转 0°，实际上可以省略这两行代码 */
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
/* 设置 front-button 样式 */
width: 100%;
height: 100%;
color: white;
background-color: cornflowerblue;
}
.back-button {
/* 设置定位方式为 absolute */
position: absolute;
/* 沿着 X 轴翻转 180° */
transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
/* 设置 back-button 样式 */
width: 100%;
height: 100%;
color: white;
background-color: cornflowerblue;
}
.flex { /* flex 布局 */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="flip-button">
<div class="front-button flex">front-button</div>
<div class="back-button flex">back-button</div>
</div>
</body>
</html>【 阅读更多 CSS 系列文章，请看 CSS学习笔记 】
原文：https://www.cnblogs.com/wsmrzx/p/11618792.html