Javascript 纯CSS<；a>；标签卡翻转

我有一个用纯css制作的卡片翻转动画。我想知道是否有可能只有当有人点击“链接”

：p

看起来您可以通过使用

：pseudo类中的焦点来完成所需的操作：

.flip-container .flipper:focus-within  {
  -webkit-transform: rotateY(180deg);
}


@导入url（'https://fonts.googleapis.com/css?family=Playfair+显示器：400400i、700700i、900900i’；
@导入url（'https://fonts.googleapis.com/css?family=Open+Sans:300300i、400400i、600600i、700700i、800800i’；
html，正文{
身高：100%；
宽度：100%；
保证金：0；
填充：0；
背景色：#eaeaea；
}
.集装箱{
宽度：900px；
高度：550px；
背景色：白色；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
保证金：自动；
}
.右分区{
宽度：540px；
高度：550px；
背景图片：url（）；
变换：比例（1）；
背景位置：-170px 0px；
背景尺寸：封面；
位置：绝对位置；
排名：0；
底部：0；
右：0；
保证金：自动；
}
.左分区{
宽度：323px；
高度：550px；
背景色：白色；
位置：绝对位置；
排名：0；
底部：0；
左：0；
保证金：自动；
}
.内容名称{
字体系列：“开放式Sans”，无衬线；
字母间距：3px；
字体大小：10px；
文本转换：大写；
颜色：#7E7E7E；
字号：700；
边缘顶部：160px；
左边距：40px；
}
.内容标题{
字体系列：“Playfair显示”，衬线；
字体大小：44px；
字母间距：3px；
字号：700；
颜色：#2c2c；
边缘顶部：10px；
左边距：40px；
}
.内容说明{
利润上限：-20px；
字体系列：“开放式Sans”，无衬线；
字体大小：13px；
颜色：#7e7e7e；
线高：22px；
左边距：40px；
}
.内容链接{
位置：绝对位置；
边缘顶部：20px；
颜色：#2c2c；
字体系列：“开放式Sans”，无衬线；
字母间距：3px；
字体大小：11px；
文本转换：大写；
字号：700；
文字装饰：无；
左边距：40px；
}
/*翻转*/
.翻转容器{
-webkit透视图：1000；
位置：固定；
最高：50%；
左：50%；
/*带上你自己的前缀*/
转换：翻译（-50%，-50%）；
}
.flip容器。flipper：在{
-webkit变换：旋转（180度）；
}
.翻转容器，.正面，.背面{
宽度：900px；
高度：550px；
}
.鳍状肢{
-webkit转换：0.6s；
-webkit变换样式：保留-3d；
位置：相对位置；
}
.前面，.后面{
-webkit背面可见性：隐藏；
位置：绝对位置；
排名：0；
底部：0；
}
.前线{
z指数：2；
}
.回来{
-webkit变换：旋转（180度）；
背景：白色；
}

标题
名称
Sed ut perpiciatis unde omnis iste natus
错误是指所有人都能清楚地看到自己的身体
：p
这基本上是滥用CSS，因为这是js的工作

无论如何，您可以使用
：target
来实现这一点，但是在文档中的其他内容成为目标之前，样式不会消失


div{
背景颜色：橙色；
高度：100px；
宽度：100px；
转型：转型1.5s轻松；
背面可见性：隐藏；
}
分区：目标{
变换：旋转（180度）；
}

可能重复使用：在您的类中处于活动状态。因此，我所问的问题在纯css中是不可能的？@ColeGwozdecki它看起来可以使用
：focus in
来完成，而这在现代浏览器中已经得到了应用。请参阅上面我的更新答案。