Question

我试图仅用CSS3创建视差效果，但不幸的是我无法，简单的结构是一个div与图像和一个div与内容，我不能在背景中使用图像。

注意：请不要建议任何JS解决方案和背景图片解决方案，因为我只是尝试使用CSS3和DIV

中的图片标记处理它

任何人都可以建议如何处理这个？这是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>

Answer 1

JSFiddle

这是我的一步一步尝试

1）将您的内容包装到包装元素中，例如具有此样式的<main>

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

2）删除float并将content-div和image-div的位置从relative转为absolute。为内容提供一些上边距（或者它将与图像重叠）并在页面中填充足够的内容以查看效果。

3）对于较慢的图层（图片），您需要使用正确的translateZ调整其scale和transform-origin属性，因此请添加此样式

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

最后，您只需更改transform: translateZ(-1px) scale(2);的值即可降低图像图层的速度，以便调整其深度。

通用公式为：

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

JSFiddle Example for n = 5

仅使用CSS3的视差效果

1 个答案: