• 手机版

    扫码体验手机版

  • 微信公众号

    扫码关注公众号

国内首家协议开发

软芯音视解码保护平台

在线
客服

发布
需求

在线
聊天

天盟
APP

天盟APP下载

关注
微信

微信扫一扫访问
顶部

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

在课程《CSS3+JS 实现超炫的散列画廊特效》第二章——2-3 3D效果编写中,照着老师的讲解敲的和视频一样的代码,为什么没有出现老师说的反转字体的效果?
                             * {            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);         }                                            

                这是一座房子
            
                            描述信息
            
        
   

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

免责声明:本内容仅代表回答会员见解不代表天盟观点,请谨慎对待。

版权声明:作者保留权利,不代表天盟立场。

使用道具 举报

发新帖

发布任务需求已有1031289位用户正在使用天盟网服务

发布分类: *
任务预算: *
需求内容: *
手机号码: *
任务商家报价为
  • 预算价 :
  • 成交价 :
  • 完工期 :
  • 质保期 :

* 最终任务项目以服务商报价、双方协商为准!