一.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
>
<
div
id
=
"content"
>
<
ul
>
<
li
>
<
div
><
img
alt
=
""
src
=
"images/1.jpg"
/></
div
>
<
div
>
<
h3
>漩涡鸣人</
h3
>
<
p
>日本漫画家岸本齐史作品《火影忍者》中男主角。因为身上封印着邪恶的九尾妖狐,无父无母的他受尽了村人的冷眼与歧视,他下定决心要成为第六代火影,让所有人都认同他的存在。</
p
>
</
div
>
</
a
>
</
li
>
<
li
>
<
div
>
<
img
alt
=
""
src
=
"images/2.jpg"
/>
</
div
>
<
div
>
<
h3
>日向雏田</
h3
>
<
p
>日本漫画家岸本齐史作品《火影忍者》中的3号女主角。木叶忍者村的女忍者,木叶名门日向一族宗家族长的长女。喜欢漩涡鸣人,原本是个性格柔弱的女孩,但是在鸣人的影响下逐渐变得坚强,并逐渐成长为一名优秀的忍者。</
p
>
</
div
>
</
a
>
</
li
>
<
li
>
<
div
><
img
alt
=
""
src
=
"images/3.jpg"
/></
div
>
<
div
>
<
h3
>蒙奇·D·路飞</
h3
>
<
p
>蒙奇·D·路飞 是日本人气动漫 《海贼王》中的主人公。是日本人气动漫 《海贼王》中的主人公。草帽海贼团船长,梦想是找到传说中的宝藏 —— ONE PIECE,成为海贼王。</
p
>
</
div
>
</
a
>
</
li
>
<
li
>
<
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
;
}