javascript - 纯CSS标签卡片翻转
问题描述
解决方案
看起来你可以通过使用: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>
推荐阅读
- java - 如何将 Unicode 字符分配给我的棋子?
- sql - 不知道具体类型时如何计算
- python-3.x - 从对象列表中删除一个类的一个对象
- .net - 端点返回动态统计数据的最佳实践
- node.js - 如何将 12 小时日期和时间转换为 24 小时日期和时间
- amazon-s3 - 我试图将我的 django-blog 存储与 IBM 存储桶而不是 AWS s3 合并。但我不能。有没有人可以帮助我
- python - Incorrect input shape after loading Keras model
- sql - 联接表而不丢失数据
- reactjs - react pdf multi lines 将所有行放在一行中
- tracking - Edge (chromium) 浏览器跟踪预防:如何在非 html 类内容(即 PDF)下正确强制加载网站图标?(再次访问时)