纯CSS3实现动态翻牌效果 仿百度贴吧3D翻牌一次动画特效
来源:互联网 发布:公司网络不能听音乐 编辑:程序博客网 时间:2024/05/17 05:00
一.html
<!doctype html>
<
html
>
<
head
>
<
meta
charset
=
"gb2312"
>
<
title
>百度帖吧 CSS3 翻牌效果</
title
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"style/reset.css"
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"style/tieba.brand.css"
>
</
head
>
<
body
>
<
h1
>百度帖吧 CSS3 翻牌效果</
h1
>
<
h2
>powered by <
a
href
=
"http://blog.wangjunfeng.com"
target
=
"_blank"
>射雕天龙的博客</
a
></
h2
>
<
div
id
=
"content"
>
<
ul
>
<
li
>
<
a
href
=
"http://blog.wangjunfeng.com"
target
=
"_blank"
>
<
div
><
img
alt
=
""
src
=
"images/1.jpg"
/></
div
>
<
div
>
<
h3
>漩涡鸣人</
h3
>
<
p
>日本漫画家岸本齐史作品《火影忍者》中男主角。因为身上封印着邪恶的九尾妖狐,无父无母的他受尽了村人的冷眼与歧视,他下定决心要成为第六代火影,让所有人都认同他的存在。</
p
>
</
div
>
</
a
>
</
li
>
<
li
>
<
a
href
=
"http://blog.wangjunfeng.com"
target
=
"_blank"
>
<
div
>
<
img
alt
=
""
src
=
"images/2.jpg"
/>
</
div
>
<
div
>
<
h3
>日向雏田</
h3
>
<
p
>日本漫画家岸本齐史作品《火影忍者》中的3号女主角。木叶忍者村的女忍者,木叶名门日向一族宗家族长的长女。喜欢漩涡鸣人,原本是个性格柔弱的女孩,但是在鸣人的影响下逐渐变得坚强,并逐渐成长为一名优秀的忍者。</
p
>
</
div
>
</
a
>
</
li
>
<
li
>
<
a
href
=
"http://blog.wangjunfeng.com"
target
=
"_blank"
>
<
div
><
img
alt
=
""
src
=
"images/3.jpg"
/></
div
>
<
div
>
<
h3
>蒙奇·D·路飞</
h3
>
<
p
>蒙奇·D·路飞 是日本人气动漫 《海贼王》中的主人公。是日本人气动漫 《海贼王》中的主人公。草帽海贼团船长,梦想是找到传说中的宝藏 —— ONE PIECE,成为海贼王。</
p
>
</
div
>
</
a
>
</
li
>
<
li
>
<
a
href
=
"http://blog.wangjunfeng.com"
target
=
"_blank"
>
<
div
>
<
img
alt
=
""
src
=
"images/4.jpg"
/>
</
div
>
<
div
>
<
h3
>盒子先生</
h3
>
<
p
>Danbo是一只用废纸盒DIY出来的可爱玩偶,圆圆的眼睛和三角形的嘴巴,时刻露出无辜的表情,让人看到就心软,Danbo是个纯真善良的小家伙,在它单纯的幻想世界里,总是透露出最纯真可爱的动人气息。</
p
>
</
div
>
</
a
>
</
li
>
</
ul
>
</
div
>
</
body
>
二、实现原理
默认图片rotateY=0;鼠标指向为rotateY=-180,负数,也就是逆时针绕y轴旋转,正数,则为顺时针;其他两个轴同理;鼠标指向时:图片(div:first-child),从0度绕y轴逆时针旋转180度到达-180度;介绍(div:last-child)从180度绕y轴逆时针旋转180度到达0度。造成两个一起逆时针旋转的效果。有人可能会问为啥介绍默认不是0度,这里注意下,介绍逆时针旋转180度之后是正面状态,所以当倍图片遮盖时,相当于从正常状态顺时针旋转了180度,因为鼠标指向时需要恢复正常状态</html
>
三.css
#content ul{
width
:
960px
;
padding
:
60px
0
;
margin
:
0
auto
;
}
#content ul li{
width
:
225px
;
height
:
180px
;
margin-right
:
20px
;
float
:
left
;
}
#content ul li:last-child{
margin-right
:
0
;
}
#content ul li a{
display
:
block
;
height
:
180px
;
/*
设置元素被查看位置的视图:
perspective 属性定义 3D 元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。
*/
-webkit-perspective:
500px
;
-moz-perspective:
500px
;
-ms-perspective:
500px
;
perspective:
500px
;
position
:
relative
;
}
#content ul li a > div{
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
180px
;
color
:
#fff
;
/*
指定嵌套元素如何在3D空间中呈现。
*/
-webkit-transform-style: preserve
-3
d;
-moz-transform-style: preserve
-3
d;
-ms-transform-style: preserve
-3
d;
/*
隐藏被旋转的 div 元素的背面
*/
-webkit-backface-
visibility
:
hidden
;
-moz-backface-
visibility
:
hidden
;
-ms-backface-
visibility
:
hidden
;
-webkit-transition:
0.8
s ease-in-out ;
-moz-transition:
0.8
s ease-in-out ;
-ms-transition:
0.8
s ease-in-out ;
position
:
absolute
;
}
#content ul li a div:first-child{
-webkit-transform: rotateY(
0
);
-moz-transform: rotateY(
0
);
-ms-transform: rotateY(
0
);
z-index
:
2
;
}
#content ul li a:hover div:first-child{
-webkit-transform: rotateY(
-180
deg);
-moz-transform: rotateY(
-180
deg);
-ms-transform: rotateY(
-180
deg);
}
#content ul li a div:last-child{
-webkit-transform: rotateY(
180
deg);
-moz-transform: rotateY(
180
deg);
-ms-transform: rotateY(
180
deg);
z-index
:
1
;
background
:
url
(
'../images/bg.jpg'
)
no-repeat
;
}
#content ul li a:hover div:last-child{
-webkit-transform: rotateY(
0
);
-moz-transform: rotateY(
0
);
-ms-transform: rotateY(
0
);
z-index
:
1
;
}
#content ul li a div h
3
{
margin
:
0
auto
15px
;
padding
:
15px
0
;
width
:
200px
;
height
:
16px
;
line-height
:
16px
;
font-size
:
14px
;
text-align
:
center
;
border-bottom
:
1px
#fff
dashed
;
}
#content ul li a div p{
padding
:
0
10px
;
font-size
:
12px
;
text-indent
:
2em
;
line-height
:
18px
;
}
0 0
- 纯CSS3实现动态翻牌效果 仿百度贴吧3D翻牌一次动画特效
- CSS3实现动态翻牌效果 仿百度贴吧3D翻牌一次动画特效
- 纯CSS实现3D翻牌效果
- HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果
- HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果
- css3实现翻牌效果
- HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果 以及图片提交
- 3D动画实现游戏翻牌功能
- WPF 动画特效--翻牌
- css3翻牌效果
- 使用css3过渡属性实现翻牌效果
- android scale实现翻牌动画效果
- android scale实现翻牌动画效果
- Android 翻牌动画 实现
- js实现翻牌效果
- NGUI实现翻牌效果
- jQuery超酷3D翻牌式倒计数特效
- 翻牌动画
- sql按指定符号分割字符串,返回分割后指定索引的第几个元素,象数组一样方便
- 关于查询动态时间的MDX语句
- List转换为JSON
- 2016/10/25
- 在LINQ to SQL中使用Translate方法以及修改查询用SQL
- 纯CSS3实现动态翻牌效果 仿百度贴吧3D翻牌一次动画特效
- 解决linq中不允许在查询中显式构造实体类型
- DataContractJsonSerializer 没有using 类库找不到
- 实体类中有主键,数据库中主键是自增的,使用linq插入记录时,由于实体类有数据产生报错的解决方法
- opencv2中vs2013配置保存和调用
- json和实体类互相转换
- 基于springmodules的缓存方案
- 使用linq进行增删改查操作例子
- 关于avalon学习地址