CSS3"曲面"3D变换/透视帮助
Jam*_*mes 7 css 3d webkit transform css3
我正试图为我的网站创建一种观点人群.它实际上是一个充满平面图像的ul,我想创造一个像圆形人群一样的"弯曲"感觉.它向内并且在内部看起来更小并且朝向末端弯曲.
海报圈示例是我能找到的最接近的http://www.webkit.org/blog-files/3d-transforms/poster-circle.html,除了我不需要"前面" - 只是背面.每幅图像为100px x 100px,每行23幅图像和4行.
关于如何处理这个问题,我几乎完全失去了...我尝试了几种不同的方法,将独特的-webkit-transform:rotateY(x)translateZ(x)应用于每个图像,但从未完全实现(努力计算正确的价值观,或完全使用错误的东西),以及玩视角.
这是一个简单的"海报墙",有9个div - 所有div都绝对位于包装div中.
在包装器div中,添加:-webkit-transform-style:preserve-3d; 这就是实际创建3D效果的原因.您可以根据所需的透视程度选择添加透视设置.
在CSS中,您可以为左侧图像创建看起来像这样的div样式:
-webkit-transform: rotateX(0deg) rotateY(30deg) rotateZ(0deg);
-webkit-transform-origin: 100% 0%;
并为右手图像:
-webkit-transform: rotateX(0deg) rotateY(-30deg) rotateZ(0deg);
-webkit-transform-origin: 0% 0%;
注意:现在只有Safari和iOS支持保留3D.对于其他浏览器,您必须通过手动缩放和倾斜图像来手动添加透视图,并且它看起来从未完全正确.
2014年更新:保存3D现在广泛支持跨浏览器