CSS Tip! https://twitter.com/ChallengesCss/status/1542107735902371846
9x Datakit Network / Substance djsubstance
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1 class="title"> | |
| DJ Substance<p> Deep Progressive Trance | |
| </h1> | |
| <svg | |
| class="morphing-svg" | |
| xmlns="http://www.w3.org/2000/svg" | |
| viewBox="0 0 700 500" | |
| style="enable-background:new 0 0 700 500" | |
| xml:space="preserve" |
A Pen by Jesper Lauridsen on CodePen.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="content"> | |
| <div class="door"> | |
| <div class="panel"></div> | |
| <div class="panel"></div> | |
| <div class="panel"></div> | |
| <div class="panel"></div> | |
| <div class="panel"></div> | |
| <div class="panel"></div> |
Using CSS 3D transforms, and just a bit of Javascript. More information on my blog.
djsubstance
/ 2-a-visualizing-the-scene-transform.markdown
Created
April 16, 2022 05:01
2.a. Visualizing the scene transform 🚀
Data table example
A Pen by alassetter on CodePen.
Perfect horizontal AND vertical centering in CSS, at any width or height!
Works with percentage based width/height, min-/max- width, images, position: fixed and even variable content heights.
Updated Aug 13: Added a comparison table, an explanation, more documentation, and a Modernizr test for variable height
Updated Aug 16: Minor corrections and clarifications