css3 实现卡片翻转效果(前后内容不同)
最编程
2024-03-20 19:44:30
...
1/ 纯css版本
参考链接 有小改动,实现的是点击 + 无限翻转(x)
先进行简单说明:
1、最外层是box,点击后添加flipped类。
2、内层分别是card,一面back一面front。
主要去看css:╮(╯▽╰)╭不影响最终结果,但又很规范的都被我删了(搞懂为目的。。)
简单来说,只要两句话:外层给 旋转 套上1秒的过渡。
transition: transform 1s;
添加的类:
.flipped{
transform: rotateY(180deg);
}
只是把整个旋转了180度而已,如果不过渡的话那就是直接变成反面的字。。。
添加正反卡片,因为两个都要重叠,都要覆盖,所以两个都是占满的绝对定位,正常定位是顺次排布会挤下去。
把后面的隐藏。
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;//后面的藏起来, 不然会有小叠加..
但他们在层叠上,还是有先后的关系,单单这样只是把front倒转而以。。。这时候需要
transform-style: preserve-3d; 呈现3d效果。。。。(给父元素)
主要代码:
<template>
<div>
<text>先做个翻转测试</text>
<div class="box" @click="toTest"
:class="this.todo===false?'':'flipped'"
>
<div>内辅助文字,可删掉</div>
<div class="card front">111</div>
<div class="card back">2222</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
todo:false,
};
},
methods: {
toTest(){
this.todo=!this.todo;
}
},
};
</script>
<style lang="scss" scoped>
.box{
margin: 50px auto;
width: 239px;
height: 334px;
background-color: green;//辅助颜色~
transform-style: preserve-3d;
transition: transform 1s;
}
.card{
//display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;//后面的藏起来, 不然会有小叠加..
border-radius: 20px;
}
.front{
background-color: pink;
//background-position: -24px -23px;
}
.back{
transform: rotateY(180deg);
background-color:blue;
//background-position: -287px -23px;
}
.flipped{
transform: rotateY(180deg);
}
</style>
多少学一下相关的。
目前浏览器都不支持 @keyframes 规则。(。。。。)
Firefox 支持替代的 @-moz-keyframes 规则。
Opera 支持替代的 @-o-keyframes 规则。
Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。
---------不过。。 感觉根本也没那么严重。好像都还可以,可能是后来都有改进。
但是transition加上keyframes好像打包后失效。先从easy的demo可完成的开始
2/ vue transtion过渡版本
下一篇: 实现卡片反转效果(简单)