纯CSS <a>标签卡翻盖
纯CSS <a>标签卡翻盖
提问于 2018-06-08 03:25:29
我有一个用纯css构建的卡片翻转动画。我想知道是否有可能只有当有人点击“链接”<a>标签而不是悬停时，卡片翻转动画才能工作？我知道用java script可以做到这一点，但我找不到任何能让它在纯css下工作的东西。有谁能给我指个方向吗？什么都行，谢谢。
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i');
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background-color:#eaeaea;}
.container {
width:900px;
height:550px;
background-color:white;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;}
.right-div {
width:540px;
height:550px;
background-image:url();
transform:scale(1);
background-position: -170px 0px;
background-size:cover;
position: absolute;
top:0;
bottom: 0;
right: 0;
margin: auto;}
.left-div {
width:323px;
height:550px;
background-color:white;
position: absolute;
top:0;
bottom: 0;
left: 0;
margin: auto;}
.content-name {
font-family: 'Open Sans', sans-serif;
letter-spacing: 3px;
font-size: 10px;
text-transform: uppercase;
color: #7E7E7E;
font-weight: 700;
margin-top:160px;
margin-left:40px;}
.content-title {
font-family: 'Playfair Display', serif;
font-size: 44px;
letter-spacing: 3px;
font-weight: 700;
color: #2C2C2C;
margin-top:10px;
margin-left:40px;}
.content-description {
margin-top: -20px;
font-family: 'Open Sans', sans-serif;
font-size: 13px;
color: #7e7e7e;
line-height: 22px;
margin-left:40px;}
.content-link {
position:absolute;
margin-top:20px;
color: #2C2C2C;
font-family: 'Open Sans', sans-serif;
letter-spacing: 3px;
font-size: 11px;
text-transform: uppercase;
font-weight: 700;
text-decoration: none;
margin-left:40px;}
/*Flip*/
.flip-container {
-webkit-perspective: 1000;
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);}
.flip-container:hover .flipper, .flip-container.hover .flipper {
-webkit-transform: rotateY(180deg);}
.flip-container, .front, .back {
width: 900px;
height: 550px;}
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
position: relative;}
.front, .back {
-webkit-backface-visibility: hidden;
position: absolute;
top:0;
bottom: 0;}
.front {
z-index: 2;}
.back {
-webkit-transform: rotateY(180deg);
background: white;}<div class="flip-container">
<div class="flipper">
<div class="front">
<div class="container">
<div class="left-div">
<p class="content-name">title</p>
<p class="content-title">name</p>
<p class="content-description">Sed ut perspiciatis unde omnis iste natus <br/> error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
<a href="#" class="content-link">Link</a>
</div>
<div class="right-div">
</div>
</div>
</div>
<div class="back">
:p
</div>
</div>
</div>
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-08 03:28:57
看起来你可以通过使用:focus-within伪类来做你想做的事情：
.flip-container .flipper:focus-within {
-webkit-transform: rotateY(180deg);
}
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i');
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background-color:#eaeaea;
}
.container {
width:900px;
height:550px;
background-color:white;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.right-div {
width:540px;
height:550px;
background-image:url();
transform:scale(1);
background-position: -170px 0px;
background-size:cover;
position: absolute;
top:0;
bottom: 0;
right: 0;
margin: auto;
}
.left-div {
width:323px;
height:550px;
background-color:white;
position: absolute;
top:0;
bottom: 0;
left: 0;
margin: auto;
}
.content-name {
font-family: 'Open Sans', sans-serif;
letter-spacing: 3px;
font-size: 10px;
text-transform: uppercase;
color: #7E7E7E;
font-weight: 700;
margin-top:160px;
margin-left:40px;
}
.content-title {
font-family: 'Playfair Display', serif;
font-size: 44px;
letter-spacing: 3px;
font-weight: 700;
color: #2C2C2C;
margin-top:10px;
margin-left:40px;
}
.content-description {
margin-top: -20px;
font-family: 'Open Sans', sans-serif;
font-size: 13px;
color: #7e7e7e;
line-height: 22px;
margin-left:40px;
}
.content-link {
position:absolute;
margin-top:20px;
color: #2C2C2C;
font-family: 'Open Sans', sans-serif;
letter-spacing: 3px;
font-size: 11px;
text-transform: uppercase;
font-weight: 700;
text-decoration: none;
margin-left:40px;
}
/*Flip*/
.flip-container {
-webkit-perspective: 1000;
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
.flip-container .flipper:focus-within {
-webkit-transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 900px;
height: 550px;
}
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
position: relative;
}
.front, .back {
-webkit-backface-visibility: hidden;
position: absolute;
top:0;
bottom: 0;
}
.front {
z-index: 2;
}
.back {
-webkit-transform: rotateY(180deg);
background: white;
}<div class="flip-container">
<div class="flipper">
<div class="front">
<div class="container">
<div class="left-div">
<p class="content-name">title</p>
<p class="content-title">name</p>
<p class="content-description">Sed ut perspiciatis unde omnis iste natus <br/> error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
<a href="#" class="content-link">Link</a>
</div>
<div class="right-div">
</div>
</div>
</div>
<div class="back">
:p
</div>
</div>
</div>
Stack Overflow用户
发布于 2018-06-08 03:57:55
这基本上是在滥用CSS，因为这是js的工作。
无论如何，您可以使用:target来实现这一点，但是，直到文档中的其他内容成为目标，样式才会消失。
div {
background-color: orange;
height: 100px;
width: 100px;
transition: transform 1.5s ease;
backface-visibility: hidden;
}
div:target {
transform: rotateY(180deg);
}<a href="#test">Click to Flip</a>
<div id="test"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50748827
复制相关文章
相似问题