From d771d858613a322342bc4cfe78bbfa964fdd2edb Mon Sep 17 00:00:00 2001
From: Cathyccccc <76764328+Cathyccccc@users.noreply.github.com>
Date: Fri, 1 Mar 2024 18:11:11 +0800
Subject: [PATCH] Update visual_scrolling.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

3d视差效果
---
 docs/css/visual_scrolling.md | 21 ++++++++-------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/docs/css/visual_scrolling.md b/docs/css/visual_scrolling.md
index 7d7bcd6b..574732ab 100644
--- a/docs/css/visual_scrolling.md
+++ b/docs/css/visual_scrolling.md
@@ -122,9 +122,7 @@ div {
     }
 
     body {
-        /* 视差元素的父级需要3D视角 */
         perspective: 1px;
-        transform-style: preserve-3d; 
         height: 100%;
         overflow-y: scroll;
         overflow-x: hidden;
@@ -132,29 +130,26 @@ div {
     #app{
         width: 100vw;
         height:200vh;
-        background:skyblue;
-        padding-top:100px;
+        /* 视差元素的父级需要3D视角 */
+        transform-style: preserve-3d; 
     }
     .one{
         width:500px;
-        height:200px;
+        height:500px;
         background:#409eff;
-        transform: translateZ(0px);
-        margin-bottom: 50px;
+        transform: translateZ(-2px);
     }
     .two{
         width:500px;
-        height:200px;
+        height:500px;
         background:#67c23a;
         transform: translateZ(-1px);
-        margin-bottom: 150px;
     }
     .three{
         width:500px;
-        height:200px;
+        height:500px;
         background:#e6a23c;
-        transform: translateZ(-2px);
-        margin-bottom: 150px;
+        transform: translateZ(0px);
     }
 </style>
 <div id="app">
@@ -177,4 +172,4 @@ div {
 ## 参考文献
 
 - https://imweb.io/topic/5b73ef73a56e07401e48729d
-- https://juejin.cn/post/6844903654458146823#heading-5
\ No newline at end of file
+- https://juejin.cn/post/6844903654458146823#heading-5