Transform, Transition and Animation - transform:scale()

pktcodes · pktcodes · commit dd50806be954 · 2022-11-09T21:55:35.000-06:00
diff --git a/index.html b/index.html
@@ -11,16 +11,8 @@
   </head>
 
   <body>
-    <div class="hero">
-      <div class="hero-center">
-        <h1>hello world</h1>
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut quos quia
-          asperiores incidunt accusantium tenetur saepe, eaque sequi? Ipsum
-          dicta illo corrupti voluptatibus minus explicabo quae officia odit
-          consequuntur distinctio!
-        </p>
-      </div>
-    </div>
+    <div class="one"></div>
+    <div class="two"></div>
+    <div class="three"></div>
   </body>
 </html>
diff --git a/styles.css b/styles.css
@@ -1,22 +1,26 @@
 /* 
-transform:translate() - Hero Example
+transform:scale() - 1 is current size 
 */
 
-* {
-  margin: 0;
+div {
+  width: 150px;
+  height: 150px;
+  display: inline-block;
 }
 
-.hero {
-  min-height: 100vh;
-  position: relative;
+.one {
+  background: red;
+  transform: scaleX(0.5);
 }
 
-.hero-center {
-  border: 2px solid red;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  min-width: 300px;
-  text-align: center;
+.two {
+  background: blue;
+  transform: scaleY(2);
+}
+
+.three {
+  background: green;
+  /* transform: translateX(50%); */
+  /* transform: scale(1.5, 1.5); */
+  transform: scale(2);
 }
