在课程《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); }
这是一座房子
描述信息
按照视频的说法,此时应该显示的是反转的背面字体,但我的还是正面的图片,是有什么细节遗漏了吗?? |