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); | |
| } |
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
/ 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
/ 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
/ 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
/ 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-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-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
/ 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
/ cube-style-2.css
Created
February 21, 2019 18:18
The noob's guide to 3D Transforms with CSS - Cube 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
| .cube { | |
| width:100%; | |
| height:100%; | |
| position:relative; | |
| animation: spinning 2s infinite; | |
| transform-style:preserve-3d; | |
| } | |
| @keyframes spinning { | |
| from { transform: translateZ(-5em) rotateY(0deg); } |