在课程《CSS3+JS 实现超炫的散列画廊特效》第二章——2-3 3D效果编写中，照着老师的讲解敲的和视频一样的代码，为什么没有出现老师说的反转字体的效果？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script ></script>
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: white;
color: #555;
font-family: 'KaiTi';
font-size: 16px;
-webkit-font-smoothing: antialiased;
}
.wrap {
width: 100%;
height: 600px;
position: absolute;
top: 50%;
margin-top: -300px;
background-color: #CECBCE;
overflow: hidden;
-webkit-perspective: 800px;
}
.photo {
width: 260px;
height: 320px;
position: absolute;
z-index: 1;
box-shadow: 0 0 1px rgba(0, 0, 0, .01);
}
.photo .side {
width: 100%;
height: 100%;
background-color: #9bdddc;
position: absolute;
top: 0;
right: 0;
padding: 20px;
box-sizing: border-box;
}
.photo .side-front {
}
.photo .side-front .image {
width: 100%;
height: 250px;
line-height: 250px;
overflow: hidden;
}
.photo .side-front .image img {
width: 100%;
}
.photo .side-front caption {
text-align: center;
font-size: 16px;
line-height: 50px;
}
.photo .side-back {
}
.photo .side-back .desc {
color: #562fff;
font-size: 16px;
line-height: 1.5em;
}
.photo_center {
left: 50%;
top: 50%;
margin: -160px 0 0 -130px;
z-index: 999;
}
.photo-wrap{
position: absolute;
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
}
.photo-wrap .side-front{
-webkit-transform: rotateY(0deg);
}
.photo-wrap .side-back{
-webkit-transform: rotateY(180deg);
}
</style>
</head>
<body onselectstart="return false">
<div class="wrap">
<div class="photo photo_center">
<div class="photo-wrap">
<div class="side side-front">
<p class="image"><img src="image/1.jpg"/></p>
<p class="caption">这是一座房子</p>
</div>
<div class="side side-back">
<p class="desc">描述信息</p>
</div>
</div>
</div>
</div>
</body>
</html>按照视频的说法，此时应该显示的是反转的背面字体，但我的还是正面的图片，是有什么细节遗漏了吗？？
添加回答
举报
0/150
提交
取消