html – 如何使用CSS3创建3D透视图？

概述我一直在努力为我一直在研究的项目创建一个3D外观卡片翻转动画类型.不幸的是,我的动画并不完全是3D. 我一直在使用这个guide.在第一个例子中,这个人设法让它看起来像窗户背景正在翻转.但是,当我尝试在JSFiddle上使用相同的代码时,结果与他的不同. 他的演示代码在下面产生了效果.当卡被翻转时,它会使一侧变小,给人以透视的印象： 在我的JSFiddle上使用他的代码(除了不同的背景),两边看起 我一直在努力为我一直在研究的项目创建一个3D外观卡片翻转动画类型.不幸的是,我的动画并不完全是3D.

我一直在使用这个guide.在第一个例子中,这个人设法让它看起来像窗户背景正在翻转.但是,当我尝试在JSFiddle上使用相同的代码时,结果与他的不同.

他的演示代码在下面产生了效果.当卡被翻转时,它会使一侧变小,给人以透视的印象：

在我的Jsfiddle上使用他的代码(除了不同的背景),两边看起来在整个时间内保持相同的大小：

有人可以向我解释我错过了什么,或者如何在他的网站上获得相同的透视效果？提前致谢.

他的HTML代码：

<div ID="f1_container"><div ID="f1_card" >  <div >    <img src="/images/windows%20logo.jpg"/>  </div>  <div >    <p>This is nice for exposing more information about an image.</p>    <p>Any content can go here.</p>  </div></div></div>

他的CSS代码：

#f1_container {  position: relative;  margin: 10px auto;  wIDth: 450px;  height: 281px;  z-index: 1;}#f1_container {  perspective: 1000;}#f1_card {  wIDth: 100%;  height: 100%;  transform-style: preserve-3d;  Transition: all 1.0s linear;}#f1_container:hover #f1_card {  transform: rotateY(180deg);  Box-shadow: -5px 5px 5px #aaa;}.face {  position: absolute;  wIDth: 100%;  height: 100%;  backface-visibility: hIDden;}.face.back {  display: block;  transform: rotateY(180deg);  Box-sizing: border-Box;  padding: 10px;  color: white;  text-align: center;  background-color: #aaa;}

解决方法 看看他说他从他的CSS中删除了供应商前缀以保持清洁？我打赌这是你的问题.其中一些CSS属性不是完全标准的,但是在具有不同供应商前缀的不同浏览器中实现.我真的不确定哪些,但谷歌可以提供帮助.

编辑：嗯.好吧,CSS无论如何都是罪魁祸首,但我实际上并没有看到很多厂商的前缀.我将他的实际CSS从页面中删除,并将其粘贴到您使用的“干净”CSS的位置,这使得小提琴起作用.他真正的CSS是：

#f1_container {    height: 281px;    margin: 10px auto;    position: relative;    wIDth: 450px;    z-index: 1;}#f1_container {    perspective: 1000px;}#f1_card {    height: 100%;    transform-style: preserve-3d;    Transition: all 1s linear 0s;    wIDth: 100%;}#f1_container:hover #f1_card,#f1_container.hover_effect #f1_card {    Box-shadow: -5px 5px 5px #AAAAAA;    transform: rotateY(180deg);}.face {    backface-visibility: hIDden;    height: 100%;    position: absolute;    wIDth: 100%;}.face.back {    -moz-Box-sizing: border-Box;    background-color: #AAAAAA;    color: #FFFFFF;    display: block;    padding: 10px;    text-align: center;    transform: rotateY(180deg);}

总结

以上是内存溢出为你收集整理的html – 如何使用CSS3创建3D透视图？全部内容，希望文章能够帮你解决html – 如何使用CSS3创建3D透视图？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。