纯css3视差和移动

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

这是完成翻译的主代码:

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

我希望我的视差图像被剪切使用溢出:隐藏。这在桌面Chrome/Safari上工作得很好，但在移动Safari上停止工作。从我进一步的实验来看，它在Android上运行良好，但在iOS7上停止工作。

你知道怎么解决这个问题吗?有没有办法在iOS上剪辑翻译过的对象?

你可能想看看这个在Mobile Safari上运行的例子:

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

我也在Codepen上复制了它以保持跟踪:

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

下面是代码…

  <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); }

相关内容

最新更新

热门标签：