alvinwan
/ cube-style-1.css
Created
February 21, 2019 18:17
The noob's guide to 3D Transforms with CSS - Cube Example, Style 1
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
| .scene { | |
| width:10em; | |
| height:10em; | |
| perspective:10em; | |
| } |
alvinwan
/ flipping-card-style-4.css
Created
February 21, 2019 18:14
The noob's guide to 3D Transforms with CSS - Flipping Card Example, Style 4
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
| .scene:hover .card { | |
| transform: rotateY(180deg); | |
| } |
alvinwan
/ flipping-card-style-3.css
Created
February 21, 2019 18:13
The noob's guide to 3D Transforms with CSS - Flipping Card Example, Style 3
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
| .face { | |
| width:100%; | |
| height:100%; | |
| color:#FFF; | |
| line-height:15em; | |
| text-align:center; | |
| position:absolute; | |
| backface-visibility:hidden; |
alvinwan
/ flipping-card-style-2.css
Created
February 21, 2019 18:13
The noob's guide to 3D Transforms with CSS - Flipping Card Example, Style 2
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
| .card { | |
| width:100%; | |
| height:100%; | |
| position:relative; | |
| transition: transform 0.5s; | |
| transform-style: preserve-3d; | |
| } |
alvinwan
/ flipping-card-style-1.css
Created
February 21, 2019 18:12
The noob's guide to 3D Transforms with CSS - Flipping Card Example, Style 1
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
| .scene { | |
| width:10em; | |
| height:15em; | |
| perspective: 30em; | |
| } |
alvinwan
/ perspective-property.css
Created
February 21, 2019 18:10
The noob's guide to 3D Transforms with CSS - Perspective Property
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
| .scene.close { | |
| perspective: 10em; | |
| } | |
| .scene.medium { | |
| perspective: 20em; | |
| } | |
| .scene.far { | |
| perspective: 100em; |
alvinwan
/ frame-of-reference.css
Created
February 21, 2019 18:07
The noob's guide to 3D Transforms with CSS - Frame of Reference Style
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
| .parent { | |
| transform: translateX(20px); | |
| } | |
| .child { | |
| transform: translateY(20px); | |
| } |
alvinwan
/ noob-3d-css-translate.css
Created
February 21, 2019 18:06
The noob's guide to 3D Transforms with CSS - Translations
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
| .translated-square { | |
| transform: | |
| translateX(20px) /* move right */ | |
| translateY(-20px) /* move down */ | |
| translateZ(20px); /* move closer to viewer */ | |
| } | |
| .translated-square-shorthand { | |
| transform: translate3d(20px, -20px, 20px); | |
| } |
alvinwan
/ noob-3d-css-scale.css
Created
February 21, 2019 18:06
The noob's guide to 3D Transforms with CSS - Scaling
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
| .scaled-square { | |
| transform: | |
| scaleX(20deg) /* flip "up" */ | |
| scaleY(-20deg) /* flip "right" */ | |
| scaleZ(20deg); /* rotate counter-clockwise */ | |
| } | |
| .scaled-square-shorthand { | |
| transform: scale3d(20deg, -20deg, 20deg); | |
| } |
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="scene"> | |
| <div class="cube"> | |
| <div class="face front">front</div> | |
| <div class="face right">right</div> | |
| <div class="face left">left</div> | |
| <div class="face back">back</div> | |
| <div class="face top">top</div> | |
| <div class="face bottom">bottom</div> | |
| </div> | |
| </div> |