SVG案例之3D视差滚动

楠木措。
已于 2023-03-23 22:00:47 修改
阅读量1.7k
点赞数 3
分类专栏： SVG互动排版文章标签： css3 前端 css
于 2022-05-30 18:21:49 首次发布
本文链接：https://blog.csdn.net/qq_33321726/article/details/125051387
版权
SVG互动排版专栏收录该内容
3 篇文章 13 订阅
订阅专栏
本文介绍了如何使用CSS3的3D属性、flex布局和SVG技术，创建一个炫酷的3D视差滚动效果。通过上下左右滑动屏幕，可以体验到深度和维度的交互变化，适用于制作吸引人的微信互动排版文章。关键在于调整SVG元素的3D坐标，以实现图片的立体错落感。
摘要由CSDN通过智能技术生成
一、案列演示：
二、交互方式：
1.上下左右滑动屏幕可实现3D视差滚动效果，配合画面设计可做出炫酷的微信互动排版文章。
三、知识要点：
1.使用CSS 3D属性、flex布局配合SVG,控制图片显示效果
四、模板代码：
<section data-author='WX：行走SVG' style="line-height: 0;background:#000 ; pointer-events: none; overflow: hidden; width: 89.5vw; margin: 0px auto; height: 179vw; font-size: 0px; visibility: visible;border-radius: 10px;">
      
            <!-- 封面  -->
            <svg enable-background="new 0 0 345 690" style="max-width:none!important;"  
                viewBox="0 0 345 690" x="0px"   y="0px">
                <animate attributeName="width" begin="click" calcMode="spline" dur="1000s" fill="freeze"
                    keySplines="0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.001;1" restart="never" values="100%;0%;0%">
                </animate>
                <rect fill="#000000" height="100%" opacity="0" style="pointer-events:visible;" width="100%">
                    <animateTransform attributeName="transform" begin="click" calcMode="discrete" dur="1000s"
                        fill="freeze" keyTimes="0;0.000001;1" restart="never" type="translate"
                        values="0 0;-1000 0;-1000 0">
                    </animateTransform>
                </rect>
            </svg>
            <section style="height:0;transform: rotate(180deg);"><svg enable-background="new 0 0 345 690"
                    style="transform: rotate(180deg);" version="1.1" viewBox="0 0 345 690" x="0px" xml:space="preserve"  y="0px">
                    <g>
                        <foreignObject  x="0" y="0" transform="matrix(0.345 0 0 0.345 0 0)" width="1000"
                            height="2000"><svg  
                                style="display: inline-block;width: 100%;vertical-align: top;background-position: 0% 0%;background-repeat: no-repeat;background-size:100%;background-attachment: scroll;background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/ibUIUzcDBvb1SzZmpNR7epOWVStmeicFj9Y5auibPwtUNtmfp5VvQ2GtWBqiaiaJpVFeDgIm6QhqDEQgdALGJfaBOWQ/0?wx_fmt=jpeg);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;"
                                viewBox="0 0 1000 2000"></svg></foreignObject>
                    </g>
                </svg>
            </section> 


        <!-- 星星组  -->
        <section style="height: 0;">
            <svg viewBox="0 0 1080 2087">
                <g> 
                    <animate attributeName='opacity' begin='0' repeatCount="indefinite" values="0;1;0"  dur="2s" fill="freeze" ></animate>
                    <foreignObject style="" x="10" y="980" transform="scale(1)" width="216" height="228">
                        <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tk10s2eHbF7MddVBKbPwSw4gcnTZJRm6ooG7yujDplP2EK1s8MeuibmYQ/0?wx_fmt=png);" viewBox="0 0 216 228"></svg>
                    </foreignObject>
                </g>
                <g>
                    <animate attributeName='opacity' begin='0.4s' repeatCount="indefinite" values="0;1;0"  dur="2s" fill="freeze" ></animate>
                    <foreignObject style="" x="100" y="100" transform="scale(0.5)" width="216" height="228">
                        <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tkmG7ScPAunrRJo3uG5n7CUgYvJh5CwUiatgaEvIVMtiaqnPQoRJicUMrUg/0?wx_fmt=png);" viewBox="0 0 216 228"></svg>
                    </foreignObject>
                </g>

                <g>
                    <animate attributeName='opacity' begin='0.1s' repeatCount="indefinite" values="0;1;0"  dur="2s" fill="freeze" ></animate>
                    <foreignObject style="" x="500" y="220" transform="scale(0.7)" width="216" height="228">
                        <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tk10s2eHbF7MddVBKbPwSw4gcnTZJRm6ooG7yujDplP2EK1s8MeuibmYQ/0?wx_fmt=png);" viewBox="0 0 216 228"></svg>
                    </foreignObject>
                </g>
                <g>
                    <animate attributeName='opacity' begin='0.3s' repeatCount="indefinite" values="0;1;0"  dur="2s" fill="freeze" ></animate>
                    <foreignObject style="" x="80" y="320" transform="scale(1)" width="216" height="228">
                        <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tk10s2eHbF7MddVBKbPwSw4gcnTZJRm6ooG7yujDplP2EK1s8MeuibmYQ/0?wx_fmt=png);" viewBox="0 0 216 228"></svg>
                    </foreignObject>
                </g>
              <g>
                    <animate attributeName='opacity' begin='0.17s' repeatCount="indefinite" values="0;1;0"  dur="2s" fill="freeze" ></animate>
                    <foreignObject style="" x="1080" y="1280" transform="scale(0.5)" width="216" height="228">
                        <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tk10s2eHbF7MddVBKbPwSw4gcnTZJRm6ooG7yujDplP2EK1s8MeuibmYQ/0?wx_fmt=png);" viewBox="0 0 216 228"></svg>
                    </foreignObject>
                </g>
                <g>
                    <animate attributeName='opacity' begin='0.7s' repeatCount="indefinite" values="0;1;0"  dur="2s" fill="freeze" ></animate>
                    <foreignObject style="" x="700" y="820" transform="scale(0.59)" width="216" height="228">
                        <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tkmG7ScPAunrRJo3uG5n7CUgYvJh5CwUiatgaEvIVMtiaqnPQoRJicUMrUg/0?wx_fmt=png);" viewBox="0 0 216 228"></svg>
                    </foreignObject>
                </g>
                <g>
                    <animate attributeName='opacity' begin='0.2s' repeatCount="indefinite" values="0;1;0"  dur="2s" fill="freeze" ></animate>
                    <foreignObject style="" x="800" y="620" transform="scale(0.6)" width="216" height="228">
                        <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tkmG7ScPAunrRJo3uG5n7CUgYvJh5CwUiatgaEvIVMtiaqnPQoRJicUMrUg/0?wx_fmt=png);" viewBox="0 0 216 228"></svg>
                    </foreignObject>
                </g>

                <g>
                    <animate attributeName='opacity' begin='0.4s' repeatCount="indefinite" values="0;1;0"  dur="2s" fill="freeze"></animate>
                    <foreignObject style="" x="1220" y="420" transform="scale(0.68)" width="216" height="228">
                        <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tk10s2eHbF7MddVBKbPwSw4gcnTZJRm6ooG7yujDplP2EK1s8MeuibmYQ/0?wx_fmt=png);" viewBox="0 0 216 228"></svg>
                    </foreignObject>
                </g>

                <g>
                    <animate attributeName='opacity' begin='0.32s' repeatCount="indefinite" values="0;1;0"  dur="2s" fill="freeze"></animate>
                    <foreignObject style="" x="1120" y="100" transform="scale(0.58)" width="216" height="228">
                        <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tk10s2eHbF7MddVBKbPwSw4gcnTZJRm6ooG7yujDplP2EK1s8MeuibmYQ/0?wx_fmt=png);" viewBox="0 0 216 228"></svg>
                    </foreignObject>
                </g>
               <g>
                    <animate attributeName='opacity' begin='0.52s' repeatCount="indefinite" values="0;1;0"  dur="2s" fill="freeze"></animate>
                    <foreignObject style="" x="720" y="2500" transform="scale(0.68)" width="216" height="228">
                        <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tk10s2eHbF7MddVBKbPwSw4gcnTZJRm6ooG7yujDplP2EK1s8MeuibmYQ/0?wx_fmt=png);" viewBox="0 0 216 228"></svg>
                    </foreignObject>
                </g>
               <g>
                    <animate attributeName='opacity' begin='0.12s' repeatCount="indefinite" values="0;1;0"  dur="2s" fill="freeze"></animate>
                    <foreignObject style="" x="420" y="2512" transform="scale(0.78)" width="216" height="228">
                        <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tk10s2eHbF7MddVBKbPwSw4gcnTZJRm6ooG7yujDplP2EK1s8MeuibmYQ/0?wx_fmt=png);" viewBox="0 0 216 228"></svg>
                    </foreignObject>
                </g>
               <g>
                    <animate attributeName='opacity' begin='0.52s' repeatCount="indefinite" values="0;1;0"  dur="2s" fill="freeze"></animate>
                    <foreignObject style="" x="220" y="2312" transform="scale(0.7)" width="216" height="228">
                        <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tk10s2eHbF7MddVBKbPwSw4gcnTZJRm6ooG7yujDplP2EK1s8MeuibmYQ/0?wx_fmt=png);" viewBox="0 0 216 228"></svg>
                    </foreignObject>
                </g>
                <g>
                    <animate attributeName='opacity' begin='0.12s' repeatCount="indefinite" values="0;1;0"  dur="2s" fill="freeze"></animate>
                    <foreignObject style="" x="920" y="2212" transform="scale(0.6)" width="216" height="228">
                        <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tk10s2eHbF7MddVBKbPwSw4gcnTZJRm6ooG7yujDplP2EK1s8MeuibmYQ/0?wx_fmt=png);" viewBox="0 0 216 228"></svg>
                    </foreignObject>
                </g>

                <g>
                    <animate attributeName='opacity' begin='0.32s' repeatCount="indefinite" values="0;1;0"  dur="2s" fill="freeze"></animate>
                    <foreignObject style="" x="1420" y="2312" transform="scale(0.6)" width="216" height="228">
                        <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tk10s2eHbF7MddVBKbPwSw4gcnTZJRm6ooG7yujDplP2EK1s8MeuibmYQ/0?wx_fmt=png);" viewBox="0 0 216 228"></svg>
                    </foreignObject>
                </g>

               <!--流星 -->
               <g>
                    <animateTransform attributeName='transform' type="translate" begin='0' dur="5s" values="0 0;-2000 1500;-2000 1500" repeatCount="indefinite"></animateTransform>
                    <foreignObject style="" x="4820" y="-800" transform="scale(0.15)" width="1000" height="1000">
                        <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tkHFrtLAGyj8Nzu11IwgsFG18kS598M6oRA7KVB17PKXhH3f4Q3BwYNA/0?wx_fmt=png);" viewBox="0 0 1000 1000"></svg>
                    </foreignObject>
                </g>

               <g>
                    <animateTransform attributeName='transform' type="translate" begin='0' dur="3s" values="0 0;-2000 1500;-2000 1500" repeatCount="indefinite"></animateTransform>
                    <foreignObject style="" x="5620" y="-800" transform="scale(0.15)" width="1000" height="1000">
                        <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tkHFrtLAGyj8Nzu11IwgsFG18kS598M6oRA7KVB17PKXhH3f4Q3BwYNA/0?wx_fmt=png);" viewBox="0 0 1000 1000"></svg>
                    </foreignObject>
                </g>


               <g>
                    <animateTransform attributeName='transform' type="translate" begin='0.5s' dur="4s" values="0 0;-2000 1500;-2000 1500" repeatCount="indefinite"></animateTransform>
                    <foreignObject style="" x="6620" y="-800" transform="scale(0.15)" width="1000" height="1000">
                        <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tkHFrtLAGyj8Nzu11IwgsFG18kS598M6oRA7KVB17PKXhH3f4Q3BwYNA/0?wx_fmt=png);" viewBox="0 0 1000 1000"></svg>
                    </foreignObject>
                </g>

            </svg>
        </section>
        <section style="height: 0px; visibility: visible;">
            <!-- 滚动视窗框 -->
            <section style=";margin-top:0vw;width: 89.5vw;perspective: 1px;overflow: scroll;visibility: visible;margin:0 auto;pointer-events:visible;">
                <!-- 3d包裹层 高度用来撑开可视高度 flex布局-->
                <section style=";display: flex;width: 300%;height: 179vw;flex-wrap: wrap;max-width: none !important;visibility: visible;white-space:nowrap;transform-style: preserve-3d;">
                    <section style="margin-left:-9.5vw;margin-top:0vw;min-width:33%;transform: translateZ(-0.5px) scale(2) rotate3D(0,0,1,0.5deg)!important;height:179vw;">
                        <svg viewBox="0 0 375 725" xml:space="preserve">
                            <foreignObject style="" x="0" y="0" transform="matrix(0.2053 0 0 0.2053 76.7271 257.08)" width="1080" height="2087">
                                <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tkJjKaHRg4ECeia8vIQIf8icmHLpicVBvS3mr6FmXrrvibT8GlGQDXfJYspg/0?wx_fmt=png);" viewBox="0 0 1080 2087"></svg>
                            </foreignObject>
                        </svg>
                    </section>
                    <section style="margin-left:-9.5vw;margin-top:0vw;min-width:33%;transform: translateZ(-1px) scale(2) rotate3D(0,-0.5,1,0.5deg)!important;height:179vw;">
                        <svg viewBox="0 0 375 725" xml:space="preserve">
                            <foreignObject style="" x="0" y="0" transform="matrix(0.2053 0 0 0.2053 76.7271 257.08)" width="1080" height="2087">
                                <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tkrOudMLCAvnhc4sC5Um1RqxIPtibpT5epDcicHo2YJoC6AibvCwmLIZJ4Q/0?wx_fmt=png);" viewBox="0 0 1080 2087"></svg>
                            </foreignObject>
                        </svg>
                    </section>
                    <section style="margin-left:0vw;margin-top:0vw;min-width:33%;transform: translateZ(-2px) scale(2) rotate3D(0,0,1,0.5deg)!important;height:179vw;">
                        <svg viewBox="0 0 375 725" xml:space="preserve">
                            <foreignObject style="" x="0" y="0" transform="matrix(0.2053 0 0 0.2053 76.7271 257.08)" width="1080" height="2087">
                                <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tkc05qzw60Q7S98eFYjgiaD1atPVG0iaR09zyxRicES4XQIJFAsG6DLSJVg/0?wx_fmt=png);" viewBox="0 0 1080 2087"></svg>
                            </foreignObject>
                        </svg>
                    </section>
                    <section style="margin-left:-9.5vw;margin-top:0vw;min-width:33%;transform: translateZ(-0.5px) scale(2)rotate3D(0,0,1,0.5deg)!important;height:179vw;">
                        <svg viewBox="0 0 375 725" xml:space="preserve">
                            <foreignObject style="" x="0" y="0" transform="matrix(0.2053 0 0 0.2053 76.7271 257.08)" width="1080" height="2087"><svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tkpdaOybHMW4uASmx06EQpJaicXwYq8AXNxAmO6qyJgViaxnGTs13m0oyw/0?wx_fmt=png);" viewBox="0 0 1080 2087"></svg>
                            </foreignObject>
                        </svg>
                    </section>
                    <section style="margin-left:0vw;margin-top:0vw;min-width:33%;transform: translateZ(-2px) scale(2)rotate3D(0,-1,1,0.5deg)!important;height:179vw;">
                        <svg viewBox="0 0 375 725" xml:space="preserve">
                            <foreignObject style="" x="0" y="0" transform="matrix(0.2053 0 0 0.2053 76.7271 257.08)" width="1080" height="2087">
                                <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tk9zVItgORRK1b9NhsX4ZJAnX2Szq1zUKtumoMttRmbLaluibgB9lhaNg/0?wx_fmt=png);" viewBox="0 0 1080 2087"></svg>
                            </foreignObject>
                        </svg>
                    </section>
                    <section style="margin-left:-9.5vw;margin-top:0vw;min-width:33%;transform: translateZ(-1px) scale(2)rotate3D(0,0.2,1,0.5deg)!important;height:179vw;">
                        <svg viewBox="0 0 375 725" xml:space="preserve">
                            <foreignObject style="" x="0" y="0" transform="matrix(0.2053 0 0 0.2053 76.7271 257.08)" width="1080" height="2087">
                                <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tkc2LkbnicTV2IcEZIa1QB8Q4ZfmrUcYial70DrxFa6vXooaUSfaYgdE5Q/0?wx_fmt=png);" viewBox="0 0 1080 2087"></svg>
                            </foreignObject>
                        </svg>
                    </section>
                    <section style="margin-left:-16vw;margin-top:0vw;min-width:33%;transform: translateZ(-0.8px) scale(2)rotate3D(0,-0.6,1,0.5deg)!important;height:179vw;">
                        <svg viewBox="0 0 375 725" xml:space="preserve">
                            <foreignObject style="" x="0" y="0" transform="matrix(0.2053 0 0 0.2053 76.7271 257.08)" width="1080" height="2087">
                                <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tk3ZFdVun8UQtCeOsnUWicRcevry4gs3S6cRYP3spBnS2cfrLoUmBasmw/0?wx_fmt=png);" viewBox="0 0 1080 2087"></svg>
                            </foreignObject>
                        </svg>
                    </section>
                    <section style="margin-left:-9.5vw;margin-top:0vw;min-width:33%;transform: translateZ(-1px) scale(2)rotate3D(0,0,1,0.5deg)!important;height:179vw;">
                        <svg viewBox="0 0 375 725" xml:space="preserve">
                            <foreignObject style="" x="0" y="0" transform="matrix(0.2053 0 0 0.2053 76.7271 257.08)" width="1080" height="2087">
                                <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tkctLibJnp1XfOOiaz3MeBjsNTiapjnn9g61ibkJQWjkcqycF1ia8ibMdg7niag/0?wx_fmt=png);" viewBox="0 0 1080 2087"></svg>
                            </foreignObject>
                        </svg>
                    </section>
                    <section style="margin-left:0vw;margin-top:0vw;min-width:33%;transform: translateZ(-2px) scale(2)rotate3D(0,-0.4,1,0.5deg)!important;height:179vw;">
                        <svg viewBox="0 0 375 725" xml:space="preserve">
                            <foreignObject style="" x="0" y="0" transform="matrix(0.2053 0 0 0.2053 76.7271 257.08)" width="1080" height="2087">
                                <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tksug0FAoxAtyXMTCPqj9NRWSkuEhwOlUgecClicSQSdPjPwTtjyXyGPg/0?wx_fmt=png);" viewBox="0 0 1080 2087"></svg>
                            </foreignObject>
                        </svg>
                    </section>
                    <section style="margin-left:0vw;margin-top:0vw;min-width:33%;transform: translateZ(-1px) scale(2)rotate3D(0,0.6,1,0.5deg)!important;height:179vw;">
                        <svg viewBox="0 0 375 725" xml:space="preserve">
                            <foreignObject style="" x="0" y="0" transform="matrix(0.2053 0 0 0.2053 76.7271 257.08)" width="1080" height="2087">
                                <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tkeusV0D1piaO3YXFMSVSQ7O8ruLvAdHlHBgmuic5N60WYdT2NVdjdHuww/0?wx_fmt=png);" viewBox="0 0 1080 2087"></svg>
                            </foreignObject>
                        </svg>
                    </section>
                    <section style="margin-left:-9.5vw;margin-top:0vw;min-width:33%;transform: translateZ(-2px) scale(2)rotate3D(0,-1,1,0.5deg)!important;height:179vw;">
                        <svg viewBox="0 0 375 725" xml:space="preserve">
                            <foreignObject style="" x="0" y="0" transform="matrix(0.2053 0 0 0.2053 76.7271 257.08)" width="1080" height="2087">
                                <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tkxxKW8zxFbMrZr7ZticGDpaFWgLxf79pfUicIDtGyhFGLxbjFAPc531nQ/0?wx_fmt=png);" viewBox="0 0 1080 2087"></svg>
                            </foreignObject>
                        </svg>
                    </section>
                    <section style="margin-left:10vw;margin-top:0vw;min-width:33%;transform: translateZ(-1px) scale(2)rotate3D(0,0.4,1,0.5deg)!important;height:179vw;">
                        <svg viewBox="0 0 375 725" xml:space="preserve">
                            <foreignObject style="" x="0" y="0" transform="matrix(0.2053 0 0 0.2053 76.7271 257.08)" width="1080" height="2087">
                                <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tkaWJga9YPPsu79YG4swuBhWUBscniaKwSm54F5QA9bhJDsmaY3sDyDXQ/0?wx_fmt=png);" viewBox="0 0 1080 2087"></svg>
                            </foreignObject>
                        </svg>
                    </section>
                    <section style="margin-left:-10vw;margin-top:0vw;min-width:33%;transform: translateZ(-1px) scale(2)rotate3D(0,-1,1,0.5deg)!important;height:179vw;">
                        <svg viewBox="0 0 375 725" xml:space="preserve">
                            <foreignObject style="" x="0" y="0" transform="matrix(0.2053 0 0 0.2053 76.7271 257.08)" width="1080" height="2087">
                                <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tkPia1OjdEud0yatJoLUSpDY5rD9KgPjONcEInUibRciaiapicR7g3tIvBohA/0?wx_fmt=png);" viewBox="0 0 1080 2087"></svg>
                            </foreignObject>
                        </svg>
                    </section>
                    <section style="margin-left:0vw;margin-top:0vw;min-width:33%;transform: translateZ(-0.5px) scale(2)rotate3D(0,0,1,0.5deg)!important;height:179vw;">
                        <svg viewBox="0 0 375 725" xml:space="preserve">
                            <foreignObject style="" x="0" y="0" transform="matrix(0.2053 0 0 0.2053 76.7271 257.08)" width="1080" height="2087">
                                <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tkMqnlGcZdLDZdEAMLiaANlquBIfvQbDkYAbjXQRHf9RZ2YTxhq9LeaJw/0?wx_fmt=png);" viewBox="0 0 1080 2087"></svg>
                            </foreignObject>
                        </svg>
                    </section>
                    <section style="margin-left:10vw;margin-top:0vw;min-width:33%;transform: translateZ(-2px) scale(2)rotate3D(0,0.5,1,0.5deg)!important;height:179vw;">
                        <svg viewBox="0 0 375 725" xml:space="preserve">
                            <foreignObject style="" x="0" y="0" transform="matrix(0.2053 0 0 0.2053 76.7271 257.08)" width="1080" height="2087">
                                <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tkODKgmSLcVRrkg2sUtKmc9LQ0W9ticHWpPkfK9p3NLQ5uS5mF24NhCUg/0?wx_fmt=png);" viewBox="0 0 1080 2087"></svg>
                            </foreignObject>
                        </svg>
                    </section>
                    <section style="margin-left:0vw;margin-top:-10vw;min-width:33%;transform: translateZ(-1px) scale(2)rotate3D(0,1,1,0.5deg)!important;height:179vw;">
                        <svg viewBox="0 0 375 725" xml:space="preserve">
                            <foreignObject style="" x="0" y="0" transform="matrix(0.2053 0 0 0.2053 76.7271 257.08)" width="1080" height="2087">
                                <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tkicvibDGpHwh8yQ3iceiadJ6cuUbPBWN49VLdPcnfZhk1xicDL7HuUdNos5g/0?wx_fmt=png);" viewBox="0 0 1080 2087"></svg>
                            </foreignObject>
                        </svg>
                    </section>
                    <section style="margin-left:0vw;margin-top:10vw;min-width:33%;transform: translateZ(-0.8px) scale(2)rotate3D(0,-1,1,0.5deg)!important;height:179vw;">
                        <svg viewBox="0 0 375 725" xml:space="preserve">
                            <foreignObject style="" x="0" y="0" transform="matrix(0.2053 0 0 0.2053 76.7271 257.08)" width="1080" height="2087">
                                <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tkUao1ibZJeEUwKoooQT4P7z6xia8ezzDmibzzP7M6g3TzQLZwXMZm3O5zw/0?wx_fmt=png);" viewBox="0 0 1080 2087"></svg>
                            </foreignObject>
                        </svg>
                    </section>
                    <section style="margin-left:2vw;margin-top:0vw;min-width:33%;transform: translateZ(-1px) scale(2)rotate3D(0,0,1,0.5deg)!important;height:179vw;">
                        <svg viewBox="0 0 375 725" xml:space="preserve">
                            <foreignObject style="" x="0" y="0" transform="matrix(0.2053 0 0 0.2053 76.7271 257.08)" width="1080" height="2087">
                                <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tkBU63KOoKDbI9tATWnWicku5YhD9yzU8mZdcLnVXBKiac3byurJMibUJLw/0?wx_fmt=png);" viewBox="0 0 1080 2087"></svg>
                            </foreignObject>
                        </svg>
                    </section>
                    <section style="margin-left:-10vw;margin-top:0vw;min-width:33%;transform: translateZ(-0.7px) scale(2)rotate3D(0,-1,1,0.5deg)!important;height:179vw;">
                        <svg viewBox="0 0 375 725" xml:space="preserve">
                            <foreignObject style="" x="0" y="0" transform="matrix(0.2053 0 0 0.2053 76.7271 257.08)" width="1080" height="2087">
                                <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tkpdVgDquACupvkt7En2J5x6Xsc0CxH0nt7nU1X5ZXH6zEvVFCzAWDtg/0?wx_fmt=png);" viewBox="0 0 1080 2087"></svg>
                            </foreignObject>
                        </svg>
                    </section>
                    <section style="margin-left:0vw;margin-top:0vw;min-width:33%;transform: translateZ(-1.5px) scale(2)rotate3D(0,0.5,1,0.5deg)!important;height:179vw;">
                        <svg viewBox="0 0 375 725" xml:space="preserve">
                            <foreignObject style="" x="0" y="0" transform="matrix(0.2053 0 0 0.2053 76.7271 257.08)" width="1080" height="2087">
                                <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tke6f2O4R9gicygJYAv50p8uMU8jstg55icjDTqsM2nYjpy7fZQTWicxCQw/0?wx_fmt=png);" viewBox="0 0 1080 2087"></svg>
                            </foreignObject>
                        </svg>
                    </section>
                    <section style="margin-left:0vw;margin-top:0vw;min-width:33%;transform: translateZ(-1.2px) scale(2)rotate3D(0,0.3,1,0.5deg)!important;height:179vw;">
                        <svg viewBox="0 0 375 725" xml:space="preserve">
                            <foreignObject style="" x="0" y="0" transform="matrix(0.2053 0 0 0.2053 76.7271 257.08)" width="1080" height="2087">
                                <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tkXq5dNgvERDUIO8FLo5JyjYQRrgpuoBspZOyiaD8CYFicib1nFF723uldg/0?wx_fmt=png);" viewBox="0 0 1080 2087"></svg>
                            </foreignObject>
                        </svg>
                    </section>
                    <section style="margin-left:-10vw;margin-top:0vw;min-width:33%;transform: translateZ(-2px) scale(2)rotate3D(0,0,1,0.5deg)!important;height:179vw;">
                        <svg viewBox="0 0 375 725" xml:space="preserve">
                            <foreignObject style="" x="0" y="0" transform="matrix(0.2053 0 0 0.2053 76.7271 257.08)" width="1080" height="2087">
                                <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tkeBnOm063icpgtHh7OI2bgMbPB8tr0dgZogsAM9OsBGVXH0yKYcbibHMw/0?wx_fmt=png);" viewBox="0 0 1080 2087"></svg>
                            </foreignObject>
                        </svg>
                    </section>
                    <section style="margin-left:0vw;margin-top:0vw;min-width:33%;transform: translateZ(-1px) scale(2)rotate3D(0,-0.2,1,0.5deg)!important;height:179vw;">
                        <svg viewBox="0 0 375 725" xml:space="preserve">
                            <foreignObject style="" x="0" y="0" transform="matrix(0.2053 0 0 0.2053 76.7271 257.08)" width="1080" height="2087">
                                <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tkZ23g6GjBfXL4KxAxWbjDf3vF9XWpU5Y3JwMGzx35UmxSWLVyGFicuOw/0?wx_fmt=png);" viewBox="0 0 1080 2087"></svg>
                            </foreignObject>
                        </svg>
                    </section>
                    <section style="margin-left:0vw;margin-top:0vw;min-width:33%;transform: translateZ(-1.2px) scale(2)rotate3D(0,-1,1,0.5deg)!important;height:179vw;">
                        <svg viewBox="0 0 375 725" xml:space="preserve">
                            <foreignObject style="" x="0" y="0" transform="matrix(0.2053 0 0 0.2053 76.7271 257.08)" width="1080" height="2087">
                                <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tkL5sq0VmHWNBwZZzfBLPiaMuFOJdTPMr66yXTA0F1QMGduszxwMvqa0Q/0?wx_fmt=png);" viewBox="0 0 1080 2087"></svg>
                            </foreignObject>
                        </svg>
                    </section>
                    <section style="margin-left:0vw;margin-top:0vw;min-width:33%;transform: translateZ(-0.7px) scale(2)rotate3D(0,0,1,0.5deg)!important;height:179vw;">
                        <svg viewBox="0 0 375 725" xml:space="preserve">
                            <foreignObject style="" x="0" y="0" transform="matrix(0.2053 0 0 0.2053 76.7271 257.08)" width="1080" height="2087">
                                <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tk2PEaLqBk4EYCKI3LZvktUtzRvvMFGzw6licRtsrr4Z8B9LK1sjnMe7w/0?wx_fmt=png);" viewBox="0 0 1080 2087"></svg>
                            </foreignObject>
                        </svg>
                    </section>
                    <section style="margin-left:-10vw;margin-top:0vw;min-width:33%;transform: translateZ(-1.5px) scale(2)rotate3D(0,0.2,1,0.5deg)!important;height:179vw;">
                        <svg viewBox="0 0 375 725" xml:space="preserve">
                            <foreignObject style="" x="0" y="0" transform="matrix(0.2053 0 0 0.2053 76.7271 257.08)" width="1080" height="2087">
                                <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tkfZvFabtyCOwibQ16ic4iadOTcibKSoTf7aiac13jnCb8JbFwL9gc6K5ibxxQ/0?wx_fmt=png);" viewBox="0 0 1080 2087"></svg>
                            </foreignObject>
                        </svg>
                    </section>
                    <section style="margin-left:0vw;margin-top:0vw;min-width:33%;transform: translateZ(-1px) scale(2)rotate3D(0,1,1,0.5deg)!important;height:179vw;">
                        <svg viewBox="0 0 375 725" xml:space="preserve">
                            <foreignObject style="" x="0" y="0" transform="matrix(0.2053 0 0 0.2053 76.7271 257.08)" width="1080" height="2087">
                                <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tkknibPNLWQgqW0YlOHPplfwkuRx9Cl21I3JOcOgS9AibsxcNicJHHNianCw/0?wx_fmt=png);" viewBox="0 0 1080 2087"></svg>
                            </foreignObject>
                        </svg>
                    </section>
                    <section style="margin-left:0vw;margin-top:0vw;min-width:33%;transform: translateZ(-1px) scale(2)rotate3D(0,1,1,0.5deg)!important;height:179vw;">
                        <svg viewBox="0 0 375 725" xml:space="preserve">
                            <foreignObject style="" x="0" y="0" transform="matrix(0.2053 0 0 0.2053 76.7271 257.08)" width="1080" height="2087">
                                <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tkCw5x0kAHnXcvyB9BQMANuJFKsmkrBhBo5QicYO5Pyl8D3dibmwy54E0A/0?wx_fmt=png);" viewBox="0 0 1080 2087"></svg>
                            </foreignObject>
                        </svg>
                    </section>
                    <section style="margin-left:-10vw;margin-top:20vw;min-width:33%;transform: translateZ(-0.5px) scale(2)rotate3D(0,0,1,0.5deg)!important;height:179vw;">
                        <svg viewBox="0 0 375 725" xml:space="preserve">
                            <foreignObject style="" x="0" y="0" transform="matrix(0.2053 0 0 0.2053 76.7271 257.08)" width="1080" height="2087">
                                <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tkUao1ibZJeEUwKoooQT4P7z6xia8ezzDmibzzP7M6g3TzQLZwXMZm3O5zw/0?wx_fmt=png);" viewBox="0 0 1080 2087"></svg>
                            </foreignObject>
                        </svg>
                    </section>
                    <section style="margin-left:0vw;margin-top:0vw;min-width:33%;transform: translateZ(-2px) scale(2)rotate3D(0,-1,1,0.5deg)!important;height:179vw;">
                        <svg viewBox="0 0 375 725" xml:space="preserve">
                            <foreignObject style="" x="0" y="0" transform="matrix(0.2053 0 0 0.2053 76.7271 257.08)" width="1080" height="2087">
                                <svg style="display: inline-block;width: 100%;vertical-align: top;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tk4W5iaadicklSVpBFOqE9nybf7gbGicyCBKIdQ7ibOMpPO489AFTzVJthIg/0?wx_fmt=png);" viewBox="0 0 1080 2087"></svg>
                            </foreignObject>
                        </svg>
                    </section>
                </section>
            </section>
        </section><svg viewBox="0 0 345 690" xml:space="preserve"></svg>
    </section>
五、使用方式：
1.模板代码中带有background-image属性的svg标签即是视差滚动中图片以及星空素材，图片更换尺建议统一；
2.可通过修改section以及foreignObject标签的transform属性来更改图片的3D(x,y,z)坐标来实现3D错落的效果。