为什么没有出现视频中的效果？？

在课程《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>

按照视频的说法，此时应该显示的是反转的背面字体，但我的还是正面的图片，是有什么细节遗漏了吗？？

熊猫爱吃鱼

浏览 1105回答 1

为什么没有出现视频中的效果？？

1回答