Parallax effect with CSS3 only

问题

I am trying to create parallax effect with CSS3 only but unfortunately I am not able to, The simple structure is one div with image and one div with content and I cannot use image in background.

NOTE: Please dont suggest any JS solution and background image solution, as I am only trying to handle it with CSS3 and image tag within DIV

Can anyone please suggest how to handle this? Here is the JSfiddle

.image-div{
        width: 100%; 
        float: left;
        -webkit-perspective: 1px;
        perspective: 1px;
        -webkit-perspective-origin: center top;
        perspective-origin: center top;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        position: relative;
    }
    .image-div img{
        width: 100%; 
        height: auto;
    }
    .content-div{
        width: 100%;
        background: #fff; 
        float: left;
        position: relative;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);

    }

<div class="image-div">
        <img src="https://pbs.twimg.com/media/B2XTRwtCAAEnqlP.jpg:large">
    </div>
    <div class="content-div">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet
            lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis
            parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci,
            sed rhoncus pronin sapien nunc accuan eget.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet
                lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis
                parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci,
                sed rhoncus pronin sapien nunc accuan eget.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet
                    lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis
                    parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci,
                    sed rhoncus pronin sapien nunc accuan eget.</p>        
    </div>

回答1:

Here's my step-by-step approach:

Wrap your content into a wrapper element, e.g. <main> with this style

main {
  position: relative;
  min-height: 100vh;
  perspective: 1px;
  transform-style: preserve-3d;
}

remove float and turn the position of content-div and image-div from relative to absolute. Give some top margin to the content (or it will overlap the image) and fill the page with enough content to see the effect.

To the slower layer (the image) you need to adjust its translateZ and scale properties with a proper transform-origin, so add this style

.image-div{
   width: 100%; 
   position: absolute;
   height: 30vw;
   transform: translateZ(-1px) scale(2);
   transform-origin: 50vw 50vh;
}

Finally you could slow down the speed of the image layer by simply changing the values for the transform: translateZ(-1px) scale(2);, so you can adjust its depth.

the general formula is:

transform: translateZ(-<n> px) scale( <n+1> );

Here is a full example

body, html { padding: 0; margin: 0; font: 1rem/1.5 Arial; }

main {
   height: 100vh;
    overflow-x: hidden;
    perspective: 1px;
    position: relative;
    transform-style: preserve-3d;
}

.image-div{
    width: 100%; 
    position: absolute;
    z-index: -1;
    height: 30vw;
    transform: translateZ(-2px) scale(3);
    transform-origin: 50vw 50vh;
}

.image-div img {
    width: 100%; 
    height: 100%;
}
 
.content-div{
    width: 100%;
    background: #fff; 
    position: absolute;
    z-index: 2;
    margin-top: 32vw;
}

<main>

   <div class="image-div">
      <img src="//via.placeholder.com/1920x600">
   </div>

   <div class="content-div">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.</p>  
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.</p>                  
    </div>      
 </main>

and here there's an interactive demo I made with some goodies like CSS variables, smooth scrolling and aspect-ratio.

来源：https://stackoverflow.com/questions/50563676/parallax-effect-with-css3-only

标签

html

css

parallax