正反面的实现

《HTML》

<div class="content">
<div class="translate">
<div class="front">
<p>吃</p>
</div>
<!-- 反面 --><!-- background-size设置背景图的大小 值为contain时 同比例缩放图片大小 -->
<div class="back">
<p>背面</p>
</div>
</div>
<div class="translate">
<!-- 正面 -->
<div class="front">
<p>西</p>
</div>
<div class="back">
<p>背面</p>
</div>
</div>
<div class="translate">
<!-- 正面 -->
<div class="front">
<p>瓜</p>
</div>
<div class="back">
<p>背面</p>
</div>
</div>

《css》

.back {
background:url(../images/11.png) no-repeat;
background-size:300px 400px;
}
/*页面内容*/
.content {
perspective:1000px;
width: 1300px;
margin:0 auto;
}
/*包含正反面div*/
.translate {
width: 300px;
height: 300px;
border-radius: 50%;
margin-left:10px;
margin-bottom:120px;
display: inline-block;/*div横排显示,变成行级元素*/
cursor: pointer;
}
/*正面*/
.translate .front{
width: 300px;
height: 300px;
border-radius: 50%;
display: inline-block;
background-color: pink;
}
/*反面*/
.translate .back{
width: 300px;
height: 400px;
border-radius: 50%;
display: none;/*让背面先隐藏,不显示*/
}
/*正反面文字样式*/
.front p{
text-align: center;
font-size: 72px;
color:#fff;
line-height: 145px;
font-family: "隶书";
}
.back p{
text-align: center;
font-size: 72px;
line-height: 145px;
color:#fff;
opacity: 0;/*使背面的字为透明,不显示*/
font-family: "微软雅黑";
}

《js》

$(function(){
$(".translate").hover(function(){
$(this).css({"transform":"rotateY(180deg)","transition":"0.6s"});//沿着Y轴旋转180度,动画时间
//获取当前索引值,当前是哪个div
var n=$(this).index();
//将背面翻转过显示,将正面隐藏
$(".back").eq(n).css({"transform":"rotateY(180deg)","display":"inline-block"});
$(".front").eq(n).hide()
},function(){
$(this).css("transform","rotateY(0deg)");
//获取当前索引值,当前是哪个div
var n=$(this).index();
//将背面翻转过显示,将正面隐藏
$(".front").eq(n).css({"transform":"rotateY(360deg)","display":"inline-block"});
$(".back").eq(n).hide()
})
})

时间: 2024-10-22 16:08:31

正反面的实现的相关文章

unity3d shader 自定义光照函数

希望实现一个根据摄像机朝向与网格法向关系控制光照亮度的双面shader. 代码如下 Shader "Custom/UnlitOP" { Properties{ _Color("Main Color", Color) = (1,1,1,1) //渲染需要外部设置的颜色 _MainTex("Base (RGB)", 2D) = "white" {} //材质 _CamDir("Camera Dirction",

Ogre Composition解析

Composition脚本与类型 上面是一个Composition资源.在解析时,主要是使用CompositionPass,CompositionTargetPass,CompositionTechnique,Compositor,而在渲染时,使用RenderSystemOperation,TargetOperation,CompositorInstance,CompositionChain.管理Composition用CompositionManage. Composition主要类型说明.

模块化开发

模块化的提出:对于一些程序,函数组成少的时候,可以放在一个源文件中. 如下面的"猜硬币游戏",只有4个函数组成 #include<iostream> #include<cstdlib> #include<ctime> using namespace std; void prn_instruction(); void play(); int get_call_from_user(); int main() { prn_instruction(); pl

重新认识决策树系列算法和逻辑斯特回归(一)

一.决策树通俗到深入理解 我们知道决策树可以用来分类,同样可以用来回归,我们主要其应用于分类的情况,回归其实是相似的. 举一个例子,一家银行要确定是否给用户发信用卡,那么它要根据用户的基本信息来确定是否要发给这个用户,假设我们知道用户的信息如下: 年龄 是否有工作 是否有自己的房子 信贷情况 性别 青年.中年.老年 是.否 是.否 差.非常差.一般.好.非常好 男.女 分类的结果当然是:发信用卡,不发信用卡 如果学过逻辑回归算法的话,我们知道,它是把这些特征进行加权之后的和然后带入sigmod函

WPF换肤之八:创建3D浏览效果

原文:WPF换肤之八:创建3D浏览效果 上节中,我们展示了WPF中的异步以及界面线程交互的方式,使得应用程序的显示更加的流畅.这节我们主要讲解如何设计一个具有3D浏览效果的天气信息浏览器. 效果显示 下面我们看截图: 是不是能够感受到一种与众不同的感觉.如果你能够感受到它的与众不同,这也是我本节所要达到的目标. 实现方式 上面的只是一个简单的3D图形,它的产生需要依赖于WPF中的MeshGeometry3D对象,这个对象按照微软官方的解释就是用于生成3D形状的三角形基元,它有三个比较重要的属性:

人生第一款Android App成功发布!

自学了几个月安卓终于做出了一个成品 没有美工,没有策划,只有我自己一个人从头做到尾 经过这两天折腾终于把APP发布出去了 APP名字叫"品茶" 介绍茶叶,茶具,茶忌,茶疗的一个小软件 单机的小软件 本来要弄APP里面那个检查更新的功能的,不过搞来搞去还是不理解,他们讲的那个服务器是什么意思,就暂且不管了,搞了个"暂无更新版本"提示就结束了...... 花了半天的时间发布, 腾讯的应用宝要身份证正反面的复印件,所以没有成功在这上面发布 360手机助手倒是最简单的,一会

Android动画--Activity界面180度翻转

这个动画效果是把Activity当做一张纸,正反面都有内容,且当点击正反面的任何一个翻转按钮,Activity都会以屏幕中心为翻转中心点(Z轴的翻转中心点可以自由设定),进行旋转. 效果如下图所示(不懂上传Gif图,懂的人请告知哈): 这个动画效果的思路是这样的,首先两个界面的布局都在同一个Layout文件中,因为这里只有一个Activity,所以两个界面的布局在同一个layout文件中就要有所设计. 在这里,我使用的是FrameLayout作为父容器,包裹着两个RelativeLayout子容

EM学习-思想和代码

EM算法的简明实现 当然是教学用的简明实现了,这份实现是针对双硬币模型的. 双硬币模型 假设有两枚硬币A.B,以相同的概率随机选择一个硬币,进行如下的抛硬币实验:共做5次实验,每次实验独立的抛十次,结果如图中a所示,例如某次实验产生了H.T.T.T.H.H.T.H.T.H,H代表正面朝上. 假设试验数据记录员可能是实习生,业务不一定熟悉,造成a和b两种情况 a表示实习生记录了详细的试验数据,我们可以观测到试验数据中每次选择的是A还是B b表示实习生忘了记录每次试验选择的是A还是B,我们无法观测实

【学】CSS3的3D动画 ——3D旋转(1)—— 妙味课堂

最近学了妙味的css3的动画,2D,3D的都有,先写一个最简单的3d翻转效果,鼠标移入div,正反面翻转效果. 注意点有: 要给正反面外面加个父级: transform-style: preserve-3d;是加在正反面的父级,使动画具有3d的效果:但是ie11并不支持preserve-3d perspective也要加在父级上,使动画具有透视效果: 要给父级也加上宽高,否则动画没有效果 <style> #box{ margin: 70px auto; width: 300px; height