纯css3视差和移动

我正在使用transform3D来实现纯CSS视差效果。 我在这里有一个非常混乱的演示设置： http : //codepen.io/anon/pen/nGAvw

这是翻译的主要代码：

transform: translateZ(-1px) scale(2); z-index: -1; transform-style: preserve-3d; 

我希望我的parallaxed图像使用溢出剪辑：隐藏。 这在桌面版Chrome / Safari上正常工作，但在Mobile Safari上停止工作。 从我的进一步实验，它在Android上工作正常，但停止在iOS7上工作。

任何想法如何解决这个问题？ 有没有办法在iOS上剪辑翻译的对象？

Answer 1

你可能想看看这个在移动Safari上工作的例子：

http://blog.keithclark.co.uk/pure-css-parallax-websites/

我也转载Codepen保持轨道：

http://codepen.io/gyopiazza/pen/BazoG

这里是代码…

HTML

  <div class="parallax"> <div id="group1" class="parallax__group"> <div class="parallax__layer parallax__layer--base"> <div class="title">Base Layer</div> </div> </div> <div id="group2" class="parallax__group"> <div class="parallax__layer parallax__layer--base"> <div class="title">Base Layer</div> </div> <div class="parallax__layer parallax__layer--back"> <div class="title">Background Layer</div> </div> </div> <div id="group3" class="parallax__group"> <div class="parallax__layer parallax__layer--fore"> <div class="title">Foreground Layer</div> </div> <div class="parallax__layer parallax__layer--base"> <div class="title">Base Layer</div> </div> </div> <div id="group4" class="parallax__group"> <div class="parallax__layer parallax__layer--base"> <div class="title">Base Layer</div> </div> <div class="parallax__layer parallax__layer--back"> <div class="title">Background Layer</div> </div> <div class="parallax__layer parallax__layer--deep"> <div class="title">Deep Background Layer</div> </div> </div> <div id="group5" class="parallax__group"> <div class="parallax__layer parallax__layer--fore"> <div class="title">Foreground Layer</div> </div> <div class="parallax__layer parallax__layer--base"> <div class="title">Base Layer</div> </div> </div> <div id="group6" class="parallax__group"> <div class="parallax__layer parallax__layer--back"> <div class="title">Background Layer</div> </div> <div class="parallax__layer parallax__layer--base"> <div class="title">Base Layer</div> </div> </div> <div id="group7" class="parallax__group"> <div class="parallax__layer parallax__layer--base"> <div class="title">Base Layer</div> </div> </div> </div> 

CSS

 /* Parallax base styles --------------------------------------------- */ .parallax { height: 500px; /* fallback for older browsers */ height: 100vh; overflow-x: hidden; overflow-y: auto; -webkit-perspective: 300px; perspective: 300px; } .parallax__group { position: relative; height: 500px; /* fallback for older browsers */ height: 100vh; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .parallax__layer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .parallax__layer--fore { -webkit-transform: translateZ(90px) scale(.7); transform: translateZ(90px) scale(.7); z-index: 1; } .parallax__layer--base { -webkit-transform: translateZ(0); transform: translateZ(0); z-index: 4; } .parallax__layer--back { -webkit-transform: translateZ(-300px) scale(2); transform: translateZ(-300px) scale(2); z-index: 3; } .parallax__layer--deep { -webkit-transform: translateZ(-600px) scale(3); transform: translateZ(-600px) scale(3); z-index: 2; } /* demo styles --------------------------------------------- */ body, html { overflow: hidden; } body { font: 100% / 1.5 Arial; } * { margin:0; padding:0; } .parallax { font-size: 200%; } /* centre the content in the parallax layers */ .title { text-align: center; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } /* style the groups --------------------------------------------- */ #group1 { z-index: 5; /* slide over group 2 */ } #group1 .parallax__layer--base { background: rgb(102,204,102); } #group2 { z-index: 3; /* slide under groups 1 and 3 */ } #group2 .parallax__layer--back { background: rgb(123,210,102); } #group3 { z-index: 4; /* slide over group 2 and 4 */ } #group3 .parallax__layer--base { background: rgb(153,216,101); } #group4 { z-index: 2; /* slide under group 3 and 5 */ } #group4 .parallax__layer--deep { background: rgb(184,223,101); } #group5 { z-index: 3; /* slide over group 4 and 6 */ } #group5 .parallax__layer--base { background: rgb(214,229,100); } #group6 { z-index: 2; /* slide under group 5 and 7 */ } #group6 .parallax__layer--back { background: rgb(245,235,100); } #group7 { z-index: 3; /* slide over group 7 */ } #group7 .parallax__layer--base { background: rgb(255,241,100); }