Modifying transforms

boonboonsiri · Feb 11, 2024 · 307ad78 · 307ad78
1 parent b933185
commit 307ad78
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 3 deletions.
diff --git a/blog/2024/01/03/building-a-scrapbook.mdx b/blog/2024/01/03/building-a-scrapbook.mdx
@@ -108,7 +108,7 @@ For example a common feature of scrapbooks are polaroid photos place haphazardly
 
 <Polaroid
   text={"Plane flight to London"}
-  transform={"rotate(-2deg) translate(700px, 200px)"}
+  transform={"rotate(-2deg) translate(450px, 300px)"}
 >
 ![](image-1.png)
 
@@ -194,7 +194,7 @@ However this is super non trivial. I thought there would be a css effect which j
 
 Similarly you can pass in the transform to place it as desired.
 
-<Sticker transform={"scale(0.35) rotate(8deg) translate(1300px, -1000px)"}>
+<Sticker style={{ position: 'relative', zIndex: '10' }} transform={"scale(0.35) rotate(8deg) translate(1000px, -300px)"}>
   ![](image-2.png)
   <div className="outline">
     ![](image-2.png)

diff --git a/src/components/Sticker.jsx b/src/components/Sticker.jsx
@@ -12,7 +12,7 @@ import BrowserOnly from '@docusaurus/BrowserOnly';
   </div>
 </Sticker> */}
 
-const Sticker = ({ transform, scale, children }) => {
+const Sticker = ({ transform, children }) => {
 
 
   return (

diff --git a/src/css/Sticker.scss b/src/css/Sticker.scss
@@ -1,4 +1,7 @@
 .Sticker {
+    z-index: 10;
+    position: relative;
+
     p {
         position: absolute;
         z-index: 3;