试图使用CSS和HTML合并名片的两部分
试图使用CSS和HTML合并名片的两部分
提问于 2022-10-26 06:53:54
我正试着制作一张名片，上面有前部和后部。这是我的密码
.business-card:hover .front{
transform: perspective(700px) rotateX(180deg);
}
.business-card .back{
transform: perspective(700px) rotateX(-180deg);
}
.business-card:hover .back{
transform: perspective(700px) rotateX(0deg);
}我创建了一个称为“前台”的类，另一个称为“back”的类(这两个类都在一个名为“名片”的类下)。
问题是我写的代码不起作用，前面部分和后面部分仍然是分开的，但是我试图合并它们，并且基本上能够在每个部分之间翻转名片。相反，我的后面部分出现在前面的部分，而不是在一起。我能做错什么呢？我已经重新检查了我的HTML代码，以确保一切都正常。除了这个，我所有的其他CSS代码都通过了。
回答 1
Stack Overflow用户
发布于 2022-10-26 08:30:55
源- https://www.w3schools.com/howto/howto_css_flip_card.asp
密码-
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
}```
Working fiddle - https://jsfiddle.net/webdev0904/hnbpuq3j/3/页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74203722
复制相关文章
相似问题
腾讯云开发者
