html - 为什么我的 CSS 规则没有应用于翻转图像?
问题描述
我有一个具有双面 HTML 元素的应用程序。当用户单击按钮时,我想“翻转”元素。我一直在努力让它像这里所示的那样工作。该示例包括以下 HTML、CSS 和 JavaScript。
HTML
<div id="myApp">
<div class="flip-card">
<div class="flip-card-inner">
<div :class="{ 'flip-card-front':true, 'flipped':!isFlipped }">Side A</div>
<div :class="{ 'flip-card-back':true, 'flipped':isFlipped }">Side B</div>
</div>
</div>
<button @click="onButtonClick">Flip</button>
</div>
CSS
.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transform: rotateY(180deg);
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.flipped {
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);
}
JavaScript
const MyApp = {
data() {
return {
isFlipped: false
}
},
methods: {
onButtonClick() {
this.isFlipped = true;
}
}
}
Vue.createApp(MyApp).mount('#myApp');
似乎没有任何错误。它的行为不像我预期的那样。一切看起来都是正确的。当有人点击按钮时,如何让卡片翻转?
更新 这个例子清除了它。
解决方案
您的课程正在按预期应用,但您遇到了 CSS 特异性问题。
像这样增加特异性:
.flip-card-front.flipped {
transform: rotateY(180deg);
}
推荐阅读
- ios - CoreLocation CLLocationManagerDelegate 在飞行途中返回缓存/延迟的位置
- javascript - 如何在使用 JS/jQuery 的按钮单击时向客户端 mapbox 地图添加新图层?
- node.js - 如何从 Node App 监听 Azure Cosmos DB 中的数据库更改
- java - 如何遍历JAVA中的未知类型列表
- excel - 如何使用关系动态替换excel中的字符串?
- c++ - 将标准输出重定向回控制台
- bash - 在文件中搜索双引号 (") 并将整行复制到不同的文件中
- c# - 我想做一个基于参数显示/隐藏表单的方法
- sql-server - 批量选择语句需要很长时间才能在 MS SQL 数据库中返回一行结果
- python - post_save 在 User 和 Profile 模型中具有 onetoone 关系时导致 IntegrityError