实现效果：
本文是在画前端页面时遇到的一个css样式问题的记录，如有错误的地方，请多多指正~我会继续努力加油~~
一、首先画出外部div
外部div——box
css样式，需要给外部设定一个固定大小。添加了 perspective属性：3D 元素距视图的距离。更能直观的感受到翻转效果的变化。
二、内部两个div
首先先写出两个div的默认样式，圆角为4px，背景颜色设置了一下。
其次就是两个div的正面样式和反面样式。两个div都需要添加翻转时的过渡效果，因此利用transform这个属性来实现。而面对正面时，front的样式是正常的，对于反面的样式opposite是需要设置一下位置和显隐。
最后就是需要设置点击翻转后两个div的样式了。
整体的代码如下：
css文件
.box {
width: 100%;
height: 300px;
text-align: center;
padding: 10px 5px;
position: relative;
perspective: 1000px;
.box-front, .box-opposite{
transform-style: preserve-3d;
backface-visibility: hidden;
transition-duration: .5s;
transition-timing-function: 'ease-in';
}
.box-opposite {
transform: rotateY(180deg);
visibility: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
.box-front{
width: 200px;
height: 300px;
border-radius: 4px;
background-color: #ee8c59;
}
.box-opposite{
width: 200px;
height: 300px;
border-radius: 4px;
background-color: #ce8483;
}
.box_reverse{
.box-front{
transform: rotateY(180deg);
visibility:hidden;
}
.box-opposite{
transform: rotateY(360deg);
visibility:visible;
}
}
参考文章：
Vue 牌面翻转效果_vue翻转_心花怒放开到荼蘼的博客-CSDN博客
推荐链接
发表评论