最近突然( ̄︶ ̄)↗ 涨了20几个粉丝,开心。
加上今天把重(gai)要(si)的工作完成了,更开心了。
就继续写篇有关CSS 3D的文章。算是上一篇的补充吧。>>戳这里看上一篇<<
先看效果:
对,就是做一个类似翻牌的效果。有没有当皇帝,翻妃子牌的感觉?呃。。偏题了。。。
这里用到的主要技术就是上一篇提到的:
transform 变化,perspective 透视,transition 过渡动画,以及 伪标签
HTML结构:
<div class="box">
<div class="box_img">
<img src="images/meinv.png" width="242" height="309" alt="">
</div>
<div class="box_info">
<a href="#">
<span>查看详细</span>
</a>
</div>
</div>
一个大box,里包裹了两部分内容。考虑到结构拓展的需要,这两部分,我都使用了div标签。
CSS
a{
text-decoration: none;
}
.box{
margin-left: auto;
margin-right: auto;
margin-top: 100px;
position: relative; /* 相对定位 */
width: 242px;
height: 300px;
perspective: 500px;
}
.box_img,
.box_info{
position: absolute; /* 绝对定位,让正反面能叠在一起 */
left: 0;
right:0;
top: 0;
bottom:0;
transition: all 1s;
backface-visibility: hidden; /* 关键样式:标签翻转后,背部不可见! */
}
.box_img{
z-index: 10; /* 关键样式:把图片部分的层级提高,否则 反面的按钮文字translate后,会穿透过来。 */
}
.box_info a{
display: block;
height: 100%;
width: 100%;
text-align: center;
background: #440fe2;
color: #fff;
}
.box_info{
transform: rotateY(-180deg); /*把文字翻过来,-180deg,背部对着我们*/
transform-style: preserve-3d; /* 让子标签的变形有3d感
这里主要是 span 标签 */
}
.box_info span{
top: 50%;
left: 50%;
width: 120px;
height: 40px;
margin-top: -40px;
margin-left: -60px;
line-height: 40px;
display: block;
font-size: 16px;
border-radius: 5px;
background: #FF6600;
position: absolute;
transition:all 0.5s;
transform: translateZ(50px); /* 让按钮文字有立体感,让它离开蓝色背景 */
transform-style: preserve-3d; /* 让子标签的变形有3d感
这里主要是 :after 伪标签*/
}
.box_info span:after{
content: "";
top: 50%;
left: 50%;
width: 120px;
height: 40px;
margin-top: -40px;
line-height: 40px;
display: block;
font-size: 16px;
border-radius: 5px;
background: rgba(0, 0, 0, 0.5);
box-shadow:0 0 10px rgba(0, 0, 0, 0.5);
transform: translateZ(-50px); /* 让投影贴在蓝色背景上 */
}
/* 当鼠标移动到 box 上的时候 :*/
.box:hover .box_img{
/* box_info 之前是翻转了 -180deg */
transform: rotateY(180deg); /* 一个正方向,一个就为负方向*/
}
.box:hover .box_info{ /* 把背面摆正 */
transform: rotateY(0deg);
}
.box_info a:active span{
transform: translateZ(0); /*超链接按下,span回到初始位置*/
}
因为有了注释,这里就不分析了。各位看官,有问题,可以留言。
啰嗦一个 样式:
backface-visibility :hidden;
主要配合 transform的 rotate 翻转 使用。 当背面朝我们的时候,背面不可见。