css 实现卡片翻转效果
最编程
2024-03-20 19:26:14
...
css实现卡片翻转效果
效果图
源码
- html
<div class="wrap">
<div class="box1">
<div class="box">春</div>
<div class="mask">生机勃勃</div>
</div>
<div class="box1">
<div class="box">夏</div>
<div class="mask">烈日炎炎</div>
</div>
<div class="box1">
<div class="box">秋</div>
<div class="mask">硕果累累</div>
</div>
<div class="box1">
<div class="box">冬</div>
<div class="mask">银装素裹</div>
</div>
</div>
- css
<style>
.wrap {
width: 840px;
height: 300px;
/* background-color: sandybrown; */
position: relative;
margin: 0 auto;
margin-top: 100px;
}
.box1 {
width: 200px;
height: 300px;
/* background-color: salmon; */
float: left;
margin: 0 5px 0 5px;
border-radius: 18px;
}
.box1:nth-child(1) .box{
background-image: url(./img/01.jpg);
}
.box1:nth-child(2) .box{
background-image: url(./img/02.jpg);
}
.box1:nth-child(3) .box{
background-image: url(./img/03.jpg);
}
.box1:nth-child(4) .box{
background-image: url(./img/04.jpg);
}
.box{
width: 200px;
height: 300px;
box-sizing: border-box;
font-size: 28px;
border-radius: 18px;
color: #fff;
padding: 38px 0 0 38px;
position: absolute;
perspective: 1000px;
transition: 0.5s ease-in-out;
}
.mask{
width: 200px;
height: 300px;
background-color: #000;
border-radius: 18px;
color: #fff;
font-size: 30px;
text-align: center;
line-height: 300px;
font-family: '微软雅黑';
font-weight: bold;
position: absolute;
backface-visibility:hidden;
perspective: 1000px;
transform: rotateY(-180deg);
transition: 0.5s ease-in-out;
}
.box1:hover .box{
transform: rotateY(-180deg);
}
.box1:hover .mask{
transform: rotateY(-360deg);
}
.box1:nth-child(1) .mask{
color: teal;
}
.box1:nth-child(2) .mask{
color: red;
}
.box1:nth-child(3) .mask{
color: orangered;
}
.box1:nth-child(4) .mask{
color: white;
}
</style>
原理:这个卡片翻转效果是利用背面的内容一开始就先翻转180度,等正面翻转的时候背面再翻转360度,这样子背面翻转到面对屏幕的时候内容却就不会是反的了。
涉及属性
- perspective
主要用来表示3D元素距离视图的距离,单位是像素,定义在父元素上,子元素就会获得透视效果。
perspective: npx; 元素距离视图的距离,以像素计。(默认值:none,与0相同)
perspective 属性只影响 3D 转换元素。
-backface-visibility:hidden;
backface-visibility 属性定义当元素不面向屏幕时是否可见。
如果在旋转元素不希望看到其背面时,使用该属性。 - transform;rotateY(); ——沿着y轴进行3d旋转。
rotate(angle) 定义 2D 旋转,在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。 - backface-visibility:hidden;
backface-visibility 属性定义当元素不面向屏幕时是否可见。
如果在旋转元素不希望看到其背面时,使用该属性。 - transition——transition是一个简写属性,用来设置四个属性:transition-property(名称), transition-duration(时间), transition-timing-function(速度曲线), transition-delay(延迟),过渡时间必须设置,否则不会产生过渡效果。
- transition-timing-function:
- linear(匀速)
- ease(默认.慢速开始,加快,慢速结束)
- ease-in(慢速开始)|ease-out(慢速结束)
- ease-in-out(慢速开始,慢速结束)
- cubic-bezier(n,n,n,n)贝赛尔曲线 自定义,n的值可为0~1