翻转的卡片
最编程
2024-03-20 19:43:12
...
* {
padding: 0;
margin: 0;
}
html {
font-size: 22px;
}
body {
display: flex;
justify-content: space-evenly;
align-items: center;
height: 100vh;
background-image: radial-gradient( circle farthest-corner at 0% 0.5%, rgba(241,241,242,1) 0.1%, rgba(224,226,228,1) 100.2% );
}
/* 设置 透视深度 */
.max {
perspective: 1000px;
}
.box {
position: relative;
width: 400px;
height: 500px;
display: block;
}
.box > div {
position: absolute;
width: 100%;
height: 100%;
font-size: 4rem;
transition: transform 0.5s ease-in-out; /* 过渡动画 */
display: flex;
justify-content: center;
align-items: center;
color: #fff;
border-radius: 10px;
box-shadow: 2px 2px 12px 0px #777;
}
/* 设置正div，显示背面时，隐藏 */
.box .positive {
backface-visibility: hidden;
background-image: linear-gradient( 109.6deg, rgba(254,87,98,1) 11.2%, rgba(255,107,161,1) 99.1% );
}
/* 鼠标移上时，顺时针旋转 180 deg */
.box:hover .positive {
transform: rotateY(180deg);
}
/* 一开始设置 反 的 背面在前面，然后隐藏， 正div 就显示出来了 */
.box .back {
transform: rotateY(-180deg);
backface-visibility: hidden;
background-image: linear-gradient( 102.1deg, rgba(96,221,142,1) 8.7%, rgba(24,138,141,1) 88.1% );
}
/* 鼠标移上时，变化原来的样子 */
.box:hover .back {
transform: rotateY(0deg);
}