🎩 add codepens

desandro · May 2, 2018 · 4119c18 · 4119c18
1 parent eb27850
commit 4119c18
Show file tree

Hide file tree

Showing 10 changed files with 87 additions and 50 deletions.
diff --git a/3d-transform-functions.md b/3d-transform-functions.md
@@ -43,6 +43,8 @@ The `rotate` functions rotate the element around the corresponding axis. This is
   <div class="transform-func-panel" style="transform: rotateZ(45deg)">rotateZ(45deg)</div>
 </div>
 
+{% include edit-codepen.html pen_slug="NMpVxV" %}
+
 There's also several shorthand transform functions so you can set values for all three dimensions:
 
 * `translate3d( tx, ty, tz )`

diff --git a/_includes/edit-codepen.html b/_includes/edit-codepen.html
@@ -0,0 +1,10 @@
+<p class="edit-codepen">
+  <a class="edit-codepen__link" href="https://codepen.io/desandro/pen/{{include.pen_slug}}">
+      <svg class="codepen-logo" xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24" width="24" height="24"
+        fill="none" stroke="#000" stroke-width="2" stroke-linejoin="round">
+        <path d="M3 9l9-6l9 6v6l-9 6l-9-6zm0 0l9 6l9-6m0 6l-9-6l-9 6m9-12v6m0 6v6" />
+      </svg>
+    <span class="edit-codepen__text">Edit this demo on CodePen</span>
+  </a>
+</p>
diff --git a/box.md b/box.md
@@ -206,6 +206,8 @@ Just like the cube example, to expose a face, the `#box` needs to have a style t
 </script>
 
 
+{% include edit-codepen.html pen_slug="KRWjzm" %}
+
 ![3D CSS box object rotating](../img/box02.png)
 
 * * *

diff --git a/card-flip.md b/card-flip.md
@@ -113,6 +113,8 @@ Now we have a working 3D object. To flip the card, we can toggle the `is-flipped
 })();
 </script>
 
+{% include edit-codepen.html pen_slug="LmWoWe" %}
+
 ![3D card flip transition](../img/card-flip01.png)
 
 ## Slide-flip
@@ -151,6 +153,8 @@ That flip now needs some horizontal movement with `translateX`. We'll set the ro
 })();
 </script>
 
+{% include edit-codepen.html pen_slug="LmWozd" %}
+
 ![3D card slide-flip transition](../img/card-flip02.png)
 
 * * *

diff --git a/carousel.md b/carousel.md
@@ -161,6 +161,8 @@ Just like our previous 3D objects, to show any one panel, we need only to apply
   </p>
 </div>
 
+{% include edit-codepen.html pen_slug="jxwELK" %}
+
 ## 3D Carousel with JavaScript
 
 By now, you probably are thinking how re-writing transform styles for each panel is tedious. And you're absolutely right. The repetitive nature of 3D objects lend themselves to scripting. We can offload all the monotonous transform styles to our JavaScript, which, if done right, will be more flexible than the hard-coded version.
@@ -185,7 +187,7 @@ By now, you probably are thinking how re-writing transform styles for each panel
       <div class="carousel__cell">15</div>
     </div>
   </div>
-  <div class="dynamic-carousel-options" style="">
+  <div class="dynamic-carousel-options">
     <p>
       <label>
         Cells
@@ -210,6 +212,8 @@ By now, you probably are thinking how re-writing transform styles for each panel
   </div>
 </div>
 
+{% include edit-codepen.html pen_slug="wjeBpp" %}
+
 Not only can we change the number of cells, we can even change the orientation of the carousel from horizontal to vertical. Perfect for The Price is Right wheel.
 
 * * *

diff --git a/conclusion.md b/conclusion.md
@@ -12,7 +12,7 @@ redirect_from:
 
 3D transforms change how we approach blank canvas of web design. Or rather, they change canvas itself, trading in the flat surface for an voluminous installation.
 
-My hope is that you took at least one peak a demo and were intrigued. We web designers, who have rejoiced for border-radius, box-shadow, and background gradient, now have an incredible tool at our disposal in 3D transforms. They deserve just the same enthusiasm, research, and experimentation we have spent on the previous browser features. Now is the perfect time to figuratively take the plunge and start thinking about how leveraging three dimensions can elevate our craft. I'm enthralled to witness what's to come.
+My hope is that you took at least one peak a demo and were intrigued. We web designers, who have rejoiced for border-radius, box-shadow, and background gradient, now have an incredible tool at our disposal in 3D transforms. They deserve just the same enthusiasm, research, and experimentation we have spent on the previous browser features. Now is the perfect time to start leveraging three dimensions and elevate our craft. I'm enthralled to witness what's to come.
 
 See you on the flip side.
 

diff --git a/css/style.css b/css/style.css
@@ -190,6 +190,18 @@ code .nd { color: #38D; } /* CSS pseudo selector */
   margin-right: 10px;
 }
 
+/* edit-codepen
+------------------------- */
+
+.edit-codepen {
+  font-size: 0.9em;
+}
+
+.edit-codepen .codepen-logo {
+  display: inline-block;
+  vertical-align: middle;
+}
+
 /* demos
 ------------------------- */
 
@@ -225,11 +237,11 @@ code .nd { color: #38D; } /* CSS pseudo selector */
 
 .set-persp-panel--red {
   background: red;
-  transform: perspective(600px) rotateY(45deg);
+  transform: perspective(400px) rotateY(45deg);
 }
 
 .scene--set-persp--blue {
-  perspective: 600px;
+  perspective: 400px;
 }
 
 .set-persp-panel--blue {
@@ -445,7 +457,7 @@ code .nd { color: #38D; } /* CSS pseudo selector */
 }
 
 .card--slide.is-flipped {
-  transform: translateX( -100% ) rotateY( -180deg )
+  transform: translateX(-100%) rotateY(-180deg);
 }
 
 .card__face {
@@ -500,11 +512,6 @@ code .nd { color: #38D; } /* CSS pseudo selector */
   transform: translateZ(-50px);
 }
 
-/*.box.is-spinning {
-  animation: spinCube 8s infinite ease-in-out;
-}
-*/
-
 .box__face {
   position: absolute;
   border: 2px solid black;

diff --git a/cube.md b/cube.md
@@ -227,6 +227,8 @@ Finishing up, we can add a transition to animate the rotation between states.
 })();
 </script>
 
+{% include edit-codepen.html pen_slug="KRWjzm" %}
+
 ![CSS 3D cube object changing sides](../img/cube02.png)
 
 * * *

diff --git a/js/perspective.js b/js/perspective.js
@@ -45,9 +45,7 @@
   // backface visibility
   var backfaceCheckbox = demo.querySelector('.backface-checkbox');
   backfaceCheckbox.onchange = function() {
-    cube.classList.toggle( 'is-backface-visible', backfaceCheckbox.checked );
+    cube.classList.toggle( 'is-backface-hidden', !backfaceCheckbox.checked );
   };
-
 
 })();
-
diff --git a/perspective.md b/perspective.md
@@ -19,34 +19,36 @@ The first technique is with the [`transform` property](https://developer.mozilla
 
 
 {% highlight css %}
-transform: perspective(600px);
+transform: perspective(400px);
 {% endhighlight %}
 
 For example:
 
 {% highlight css %}
 .panel--red {
   /* perspective function in transform property */
-  transform: perspective(600px) rotateY(45deg);
+  transform: perspective(400px) rotateY(45deg);
 }
 {% endhighlight %}
 
 <div class="scene scene--set-persp">
   <div class="set-persp-panel set-persp-panel--red"></div>
 </div>
 
+{% include edit-codepen.html pen_slug="XqMGRB" %}
+
 The second technique is with the [`perspective` property](https://developer.mozilla.org/en-US/docs/Web/CSS/perspective):
 
 {% highlight css %}
-perspective: 600px;
+perspective: 400px;
 {% endhighlight %}
 
 For example:
 
 {% highlight css %}
 .scene--blue {
   /* perspective property */
-  perspective: 600px;
+  perspective: 400px;
 }
 
 .panel--blue {
@@ -58,6 +60,8 @@ For example:
   <div class="set-persp-panel set-persp-panel--blue"></div>
 </div>
 
+{% include edit-codepen.html pen_slug="PepLOz" %}
+
 These two formats both trigger a 3D space and can produce the same visual result. But there is a difference. The functional notation is convenient for directly applying a 3D transform on a single element (in the red example, I use it in conjunction with a `rotateY` transform). In this way, it is used as a shorthand to transform a single element in 3D.
 
 But when used on multiple elements, the effect breaks. The transformed elements don't line up together. This is because each element has its own perspective, its own vanishing point. To remedy this, use the `perspective` property on a parent element, so each child may share the same 3D space.
@@ -80,6 +84,8 @@ But when used on multiple elements, the effect breaks. The transformed elements
   <div class="persp-children-panel persp-children-panel--separate"></div>
 </div>
 
+{% include edit-codepen.html pen_slug="WJpmdO" %}
+
 {% highlight css %}
 .scene--together {
   perspective: 400px;
@@ -102,6 +108,8 @@ But when used on multiple elements, the effect breaks. The transformed elements
   <div class="persp-children-panel persp-children-panel--together"></div>
 </div>
 
+{% include edit-codepen.html pen_slug="MGpxVG" %}
+
 The value of `perspective` determines the intensity of the 3D effect. Think of it as a distance from the viewer to the object. The greater the value, the further the distance, the less intense the visual effect. `perspective: 2000px` yields a subtle 3D effect, as if we are viewing an object from far away through binoculars. `perspective: 100px` produces a tremendous 3D effect, like a tiny insect viewing a massive object.
 
 By default, the vanishing point for a 3D space is positioned at the center. You can change the position of the vanishing point with [`perspective-origin` property](https://developer.mozilla.org/en-US/docs/Web/CSS/perspective-origin).
@@ -114,7 +122,7 @@ perspective-origin: 25% 75%;
 
 <div class="demo demo--persp-cube">
   <div class="scene scene--cube scene--persp-cube">
-    <div class="cube is-spinning is-backface-visible">
+    <div class="cube is-spinning">
       <div class="cube__face cube__face--front">front</div>
       <div class="cube__face cube__face--back">back</div>
       <div class="cube__face cube__face--right">right</div>
@@ -123,40 +131,40 @@ perspective-origin: 25% 75%;
       <div class="cube__face cube__face--bottom">bottom</div>
     </div>
   </div>
-  <div class="options">
-    <div class="options__row">
-      <label>
-        perspective
-        <input class="perspective-range" type="range" min="1" max="2000" value="400" data-units="px" />
-      </label>
-    </div>
-    <div class="options__row">
-      <label>
-        perspective-origin x
-        <input class="origin-x-range" type="range" min="0" max="100" value="50" data-units="%" />
-      </label>
-    </div>
-    <div class="options__row">
-      <label>
-        perspective-origin y
-        <input class="origin-y-range" type="range" min="0" max="100" value="50" data-units="%" />
-      </label>
-    </div>
-    <div class="options__row">
-      <label>
-        Spin cube
-        <input class="spin-cube-checkbox" type="checkbox" />
-      </label>
-    </div>
-    <div class="options__row">
-      <label>
-        Backface visible
-        <input class="backface-checkbox" type="checkbox" checked />
-      </label>
-    </div>
-  </div>
+  <p>
+    <label>
+      perspective
+      <input class="perspective-range" type="range" min="1" max="2000" value="400" data-units="px" />
+    </label>
+  </p>
+  <p>
+    <label>
+      perspective-origin x
+      <input class="origin-x-range" type="range" min="0" max="100" value="50" data-units="%" />
+    </label>
+  </p>
+  <p>
+    <label>
+      perspective-origin y
+      <input class="origin-y-range" type="range" min="0" max="100" value="50" data-units="%" />
+    </label>
+  </p>
+  <p>
+    <label>
+      Spin cube
+      <input class="spin-cube-checkbox" type="checkbox" />
+    </label>
+  </p>
+  <p>
+    <label>
+      Backface visible
+      <input class="backface-checkbox" type="checkbox" checked />
+    </label>
+  </p>
 </div>
 
+{% include edit-codepen.html pen_slug="bMqZmr" %}
+
 * * *
 
 [**Next: 3D transform functions &rarr;**](3d-transform-functions.html)