一款简约的卡发点击反转展示的特效动画,CSS的翻转并缩放的效果还是不错的,适合用于人物介绍之类的,元素样式都可以自行修改...
jquery库在页面head部分引入,所有CSS样式也写在head部分,部分CSS样式代码如下:
.element-card {
position:relative;
width:100px;
height:130px;
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-transform:rotatey(0deg) translatex(0px) translatey(0px);
transform:rotatey(0deg) translatex(0px) translatey(0px);
-webkit-transition:all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
transition:all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
box-shadow:4px 4px 20px rgba(0,0,0,0.4);
margin:5px;
cursor:pointer;
}
.element-card:hover {
-webkit-transform:rotatey(45deg) translatex(0px) translatey(0px);
transform:rotatey(45deg) translatex(0px) translatey(0px);
}
.element-card.open {
width:200px;
height:260px;
-webkit-transform:rotatey(-180deg) translatex(0px) translatey(0px);
transform:rotatey(-180deg) translatex(0px) translatey(0px);
}
.element-card .front-facing {
-webkit-transform:rotateY(0deg) translateZ(2px);
transform:rotateY(0deg) translateZ(2px);
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
background-color:#ecf0f1;
border:2px white solid;
border-radius:5px;
}
页面的body主要以div作为容器,依次放入正面和反转后背面的内容,结构还是比较简单的,部分代码如下:
<div class="element-card">
<div class="front-facing">
<h1 class="abr">Au</h1>
<p class="title">金</p>
<span class="atomic-number">79</span>
<span class="atomic-mass">196.97</span>
</div>
<div class="back-facing">
<p>金是一种过渡金属,在溶解后可以形成三价及单价正离子。金与大部分化学物都不会发生化学反应,但可以被氯、氟、王水及氰化物侵蚀。金能够被水银溶解,形成汞齐,但这并非化学反应。</p>
</div>
</div>
底部的jquery代码,主要是响应鼠标的点击事件,并对当前样式进行判断后移除或添加样式,代码如下:
$('.element-card').on('click', function() {
if ($(this).hasClass('open')) {
$(this).removeClass('open');
} else {
$('.element-card').removeClass('open');
$(this).addClass('open');
}
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791