Initial commit

jessicarush · Feb 4, 2020 · 726281b · 726281b
1 parent bf63aad
commit 726281b
Show file tree

Hide file tree

Showing 2 changed files with 157 additions and 0 deletions.
diff --git a/css_transforms/base.css b/css_transforms/base.css
@@ -0,0 +1,92 @@
+@charset "UTF-8";
+
+
+
+/* VARIABLES -------------------------------------------------------------- */
+
+:root {
+  --heading-font: 'Open Sans', sans-serif;
+  --main-font: 'Open Sans', sans-serif;
+  --minor-font: 'Open Sans', sans-serif;
+  --heading-color: rgba(0,0,50,.9);
+  --main-color: rgba(70,70,90,.9);
+  --minor-color: rgb(190,190,200);
+  --emphasis-color: rgb(27,211,165);
+}
+
+
+
+/* DEFAULTS --------------------------------------------------------------- */
+
+html {
+  color: var(--main-color);
+  font-family: var(--main-font);
+  font-size: 16px;
+  font-weight: 400;
+}
+
+/* TYPOGRAPHY ------------------------------------------------------------- */
+
+.primary-heading {
+  color: var(--heading-color);
+  font-family: var(--heading-font);
+  font-size: 2rem;
+  font-weight: 400;
+}
+
+.secondary-heading {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-top: 3em;
+}
+
+
+/* LINKS & BUTTONS -------------------------------------------------------- */
+
+/* LAYOUT ----------------------------------------------------------------- */
+
+/* COMPONENTS ------------------------------------------------------------- */
+
+/* COSMETIC --------------------------------------------------------------- */
+
+.box {
+  background: aliceblue;
+  padding: 20px;
+  border-radius: 4px;
+  border: solid 5px turquoise;
+  width: 225px;
+  margin: 30px 0;
+  box-sizing: border-box;
+}
+
+.trans-rotate {
+  transform: rotate(10deg);
+}
+
+.trans-scale {
+  transform: scale(0.75, 0.75);
+}
+
+.trans-skew {
+  transform: skew(25deg, 5deg);
+}
+
+.trans-translate {
+  transform: translate(50%, 25px);
+}
+
+.trans-matrix {
+  transform: matrix(1.4, 0.25, 0.25, 1.4, 100, 50);
+}
+
+.trans-rotatexy {
+  transform: rotate(-15deg) rotateY(30deg);
+}
+
+.trans-perspective {
+  transform: perspective(250px) rotate(-15deg) rotateY(30deg);
+}
+
+/* UTILITY ---------------------------------------------------------------- */
+
+/* STATE ------------------------------------------------------------------ */
diff --git a/css_transforms/index.html b/css_transforms/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>CSS Transforms</title>
+  <link href="base.css" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
+</head>
+
+<body>
+
+  <header>
+    <h1 class="primary-heading">CSS Transform</h1>
+  </header>
+
+  <main>
+    <p>The <code>transform</code> property lets you rotate, scale, skew, or translate (reposition) an element. It modifies the coordinate space of the CSS visual formatting model.</p>
+
+    <p>There are many <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function">transform functions</a> that can be used. The most basic ones are as follows...</p>
+
+    <div>
+      <h2 class="secondary-heading">rotate()</h2>
+      <p>Rotates an element around a fixed point on the 2D plane.</p>
+      <div class="trans-rotate box">rotate(10deg)</div>
+    </div>
+
+    <div>
+      <h2 class="secondary-heading">scale()</h2>
+      <p>Scales an element up or down on the 2D plane.</p>
+      <div class="trans-scale box">scale(0.75, 0.75)</div>
+    </div>
+
+    <div>
+      <h2 class="secondary-heading">skew(25deg, 5deg)</h2>
+      <p>Skews an element on the 2D plane.</p>
+      <div class="trans-skew box">scale(25deg, 5deg)</div>
+    </div>
+
+    <div>
+      <h2 class="secondary-heading">translate()</h2>
+      <p>Repositions an element on the 2D plane.</p>
+      <div class="trans-translate box">translate(50%, 25px)</div>
+    </div>
+
+    <div>
+      <h2 class="secondary-heading">perspective()</h2>
+      <p>Sets the distance between the user and the z=0 plane. In order to see perspective, you need to have also applied another transformation like rotate.</p>
+      <div class="trans-rotatexy box">rotate(-15deg) rotateY(30deg)</div>
+      <div class="trans-perspective box">rotate(-15deg) rotateY(30deg) perspective(250px)</div>
+    </div>
+
+    <div>
+      <h2 class="secondary-heading">matrix()</h2>
+      <p>Describes a homogeneous 2D transformation matrix. The values represent the following functions:</p>
+      <p><code>matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )</code></p>
+      <div class="trans-matrix box">matrix(1.4, 0.25, 0.25, 1.4, 100, 50)</div>
+    </div>
+  </main>
+
+  <footer>
+  </footer>
+
+</body>
+</html>