css3 实现明信片正背面翻转
<!DOCTYPE html>
<html lang="zh-cn" style="width: 100%;height: 100%;">
<head>
<meta charset="UTF-8">
<title>预览明信片</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="Houyuqing">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
<style>
.pre-top {
text-align: center;
padding-bottom: px;
line-height: ;
}
.pre-top span {
font-size: px;
color: #fff;
padding: px;
}
.pre-top span:nth-of-type() {
position: relative;
}
.pre-top span:nth-of-type():after {
position: absolute;
content: '';
z-index: ;
width: px;
height: px;
top: px;
right: -px;
background: #fff;
}
.preview {
height: %;
width: %;
box-sizing: border-box;
perspective: px;
}
.preview figure {
margin: ;
height: %;
transform-style: preserve-3d;
transition: s transform;
}
.figure1 {
transform: rotateY(.5turn);
}
.preview figure img {
width: %;
height: %;
box-sizing: border-box;
border: px solid #fff;
box-shadow: px px px #a6a3a4;
}
.preview figcaption {
position: absolute;
top: ;
left: ;
width: %;
height: %;
z-index: ;
background-image: url("../images/img-back.png");
background-size: cover;
transform: rotateY(.5turn) translateZ(px);
}
.preview figcaption h1 {
position: absolute;
}
.fig-word {
font-size: px;
color: #000;
padding: px px;
}
</style>
</head>
<body class="word-back">
<div class="pre-top">
<span class="commRed span1">正面</span>
<span class="span2">背面</span>
</div>
<div class="preview">
<figure class="relative">
<img src="../images/11.jpg" alt="" class="">
<figcaption>
<p class="fig-word css11339c70851c62b">这是好友给你的悄悄哦这是好友给你的悄悄哦这是好友给你的悄悄哦这是好友给你的悄悄哦这是好友给你的悄悄哦这是好友给你的悄悄哦这是好友给你的悄悄哦</p>
</figcaption>
</figure>
</div>
<script src="../js/jquery.min.js"></script>
<script>
// 正面
$('.span1').click(function () {
$('figure').removeClass('figure1');//背面消失
$(this).addClass('commRed').siblings().removeClass('commRed');//加红色
});
// 背面
$('.span2').click(function () {
$('figure').addClass('figure1');//背面出现
$(this).addClass('commRed').siblings().removeClass('commRed');//加红色
});
// 点击页面转换正背面
$('.preview').click(function () {
if($('.span1').is('.commRed')){
$('figure').addClass('figure1');//背面出现
$('.span1').removeClass('commRed').siblings().addClass('commRed');//加红色
}else {
$('figure').removeClass('figure1');//背面消失
$('.span2').removeClass('commRed').siblings().addClass('commRed');//加红色
}
})
</script> </body>
</html>
.pre-top {
text-align: center;
padding-bottom: px;
line-height: ;
}
.pre-top span {
font-size: px;
color: #fff;
padding: px;
}
.pre-top span:nth-of-type() {
position: relative;
}
.pre-top span:nth-of-type():after {
position: absolute;
content: '';
z-index: ;
width: px;
height: px;
top: px;
right: -px;
background: #fff;
}
.preview {
height: %;
width: %;
box-sizing: border-box;
perspective: px;
}
.preview figure {
margin: ;
height: %;
transform-style: preserve-3d;
transition: s transform;
}
.figure1 {
transform: rotateY(.5turn);
}
.preview figure img {
width: %;
height: %;
box-sizing: border-box;
border: px solid #fff;
box-shadow: px px px #a6a3a4;
}
.preview figcaption {
position: absolute;
top: ;
left: ;
width: %;
height: %;
z-index: ;
background-image: url("../images/img-back.png");
background-size: cover;
transform: rotateY(.5turn) translateZ(px);
}
.preview figcaption h1 {
position: absolute;
}
css3 实现明信片正背面翻转的更多相关文章
- 一款纯css3实现的图片3D翻转幻灯片
之前介绍了好多款网页幻灯片,今天要给大家再带来一款纯css3实现的图片3D翻转幻灯片.这款幻灯片图片轮播采用了3D翻转的形式,效果非常不错.一起看下效果图: 在线预览 源码下载 实现的代码. ht ...
- 如何用CSS3来实现卡片的翻转特效
CSS3实现翻转(Flip)效果 动画效果 效果分析 当鼠标滑过包含块时,元素整体翻转180度,以实现“正”“反”面的切换. HTML分析 分析:.container,.flip为了实现动画效果做准备 ...
- 一款基于css3的散子3D翻转特效
css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的规律,代码如下: <body& ...
- 纯css3 transforms 3D文字翻开翻转3D开放式效果
详细内容请点击 在线预览立即下载 在本教程中,将基于CSS3创建的一个实现一个有趣的3D开放式效果.教程的目的是展示我们如何能带来一些生活上使用CSS3 . html: <ul class=&q ...
- css3 向上淡入 小图标翻转 360度旋转
代码 <!DOCTYPE HTML> <html> <style type="text/css"> div { border: 1px soli ...
- CSS3之图片3D翻转效果(网页效果--每日一更)
今天,带来的是纯CSS3的效果--图片3D翻转. 请看效果:亲,请点击这里 这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animatio ...
- 一个纯CSS实现的卡片翻转效果
先上代码 <div id="box"> <div class="front">正面</div> <div class= ...
- BZOJ3526[Poi2014]Card——线段树合并
题目描述 有n张卡片在桌上一字排开,每张卡片上有两个数,第i张卡片上,正面的数为a[i],反面的数为b[i].现在,有m个熊孩子来破坏你的卡片了!第i个熊孩子会交换c[i]和d[i]两个位置上的卡片. ...
- 霍金：AI或许能根除疾病和贫穷，但也可能摧毁人类 | GMIC 2017
在我的一生中,我见证了社会深刻的变化.其中最深刻的,同时也是对人类影响与日俱增的变化,是人工智能的崛起.简单来说,我认为强大的人工智能的崛起,要么是人类历史上最好的事,要么是最糟的.我不得不说,是好是 ...
随机推荐
- 【JZOJ2679】跨时代
description 钟逆时针而绕,恶物狰狞的倾巢,我谦卑安静地于城堡下的晚祷,压抑远古流窜的蛮荒暗号,而管风琴键高傲的说,那只是在徒劳.我的乐器在环绕,时代无法淘汰我霸气的皇朝. 你无法预言,因为 ...
- 学习笔记 css样式
大小 width:宽度 height:高度 背景 background-color 背景色 background-image 背景图片 background-repeat 背景平铺 ...
- LUOGU P1342 请柬(最短路)
传送门 解题思路 又是一道语文题,弄清楚题意之后其实就能想出来了,从1跑一遍最短路,把$dis[n]$加入答案.在建个反图跑一遍最短路,把$dis[n]_$加入最短路就行了.第一遍是去的时候,第二遍是 ...
- sql.xml where ids in的写法
<if test="iSurfaceTypeArray != null"> AND b.i_SurfaceType in <!-- 根据外观检查查询 --> ...
- Mysql自带查询阻塞语句
select r.trx_id waiting_trx_id, r.trx_mysql_thread_Id waiting_thread, r.trx_query waiting_query, b.t ...
- Extjs4 desktop 图标自动换行,横纵排列 图标大小修改
一.图标换行 /*! * Ext JS Library 4.0 * Copyright(c) 2006-2011 Sencha Inc. * licensing@sencha.com * http:/ ...
- Java-MyBatis-MyBatis3-XML映射文件：自动映射
ylbtech-Java-MyBatis-MyBatis3-XML映射文件:自动映射 1.返回顶部 1. 自动映射 正如你在前面一节看到的,在简单的场景下,MyBatis 可以为你自动映射查询结果.但 ...
- java中自己对页面跳转问题的一些经验
在eclipse中,如果你要在jsp页面跳转到servlet页面中,可以用action=“/根文件名/servlet文件名” 的方式跳转. 例如我创建了一个web application名字是test ...
- JavaScript事件(随笔)
1. Javascript事件介绍 JavaScript中的事件和现实生活中的事件类似,现实生活中发生的一些事情,例如:交通事件,当这些事情发生时,我们需要提供处理方案: 在JavaScript中事件 ...
- 11-3-while
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...