HTML+CSS 制作翻牌效果[练习]
2021-05-19 本文已影响0人
新晋魔法师
案例来源
本例来自CodingStartup的视频：HTML+CSS 制作翻牌效果
学到知识
- 使用
backface-visibility:hidden属性，可以在翻转元素的时候隐藏背面，否则显示镜像的背面(注意兼容问题)。 - 可以使用
position:absolute属性，重叠两个元素 - 使用perspective 设定立体的透视深度，此属性有两种设置方法:
- 设置在执行动作的元素transform属性内：
transform: perspective(1000px) rotateY(180deg) - (本例)设置在执行动作的元素的父元素，使用
perspective: 1000px
- 设置在执行动作的元素transform属性内：
- 在使用
:hover伪类时，要尽量作用在执行动作的元素的父类，以免因为改变形状而影响效果的稳定。 - 分享渐变效果的网站：Gradient Hunt
主要代码
html
<body>
<div class="container">
<div class="cover">COVER</div>
<div class="back">BACK</div>
</div>
<div class="container">
<div class="cover">COVER</div>
<div class="back">BACK</div>
</div>
<div class="container">
<div class="cover">COVER</div>
<div class="back">BACK</div>
</div>
</body>
css
html {
font-size: 22px;
}
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: space-evenly;
align-items: center;
background-image: linear-gradient( 90.5deg, rgba(255,207,139,0.50) 1.1%, rgba(255,207,139,1) 81.3% );
}
.container {
width: 300px;
height: 400px;
position: relative;
perspective: 1000px;
}
.cover, .back{
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: transform .25s ease-in-out;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 1.6rem;
text-shadow: .1rem .2rem .1rem rgba(0,0,0,.2);
border-radius: .4rem;
box-shadow: .2rem .3rem .4rem rgba(0,0,0,.1);
}
.cover {
transform: rotateY(0deg);
background-image: radial-gradient( circle 465px at -15.1% -25%, rgba(17,130,193,1) 0%, rgba(67,166,238,1) 49%, rgba(126,203,244,1) 90.2% );
}
.container:hover .cover {
transform: rotateY(180deg);
}
.back {
transform: rotateY(-180deg);
background-image: radial-gradient( circle 1294px at -15.5% 23.8%, rgba(255,206,149,1) 0%, rgba(247,92,92,1) 44.9%, rgba(108,0,96,0.97) 93.8% );
}
.container:hover .back{
transform: rotateY(0deg);
}
