1
Use the Border-Radius CSS Property to Define Horizontal and Vertical Radius
3m 43s
2
Explore a Site's CSS with Chrome DevTools CSS Overview
1m 58s
3
Create an Animated Underline Effect using CSS Transition and CSS Background Position
4m 31s
4
Use the HSL Color Space and Scoped CSS Variables to Prototype UI Variants
2m 47s
5
Use content-visibility: auto to Improve Initial Page Load Time
2m 6s
6
Use CSS @keyframes to Create a Basic Loading Animation
2m 36s
7
Use CSS filter to Create a Drop Shadow
1m 28s
8
Use CSS pseudo-elements and mix-blend-mode to Create a Duotone Style Effect
2m 24s
9
Use CSS Variables to Maintain the Aspect Ratio for an Element
1m 19s
10
Use Multiple Background Images to Create Single Element CSS Art
4m 22s
11
Use CSS Variables Almost like Boolean Values with Calc
3m 59s
12
Use CSS Transforms to Create Configurable 3D Cuboids
5m 17s
13
Use CSS Variables with Calc and HSL to Implement Dark Mode
2m 5s
14
Use CSS Scroll Behavior for Animated Anchor Scrolls
1m 41s
15
Use CSS Scroll Margin to Give Content Breathing Room
1m 49s
16
Use CSS @property to Animate and Transition Custom Properties
2m 56s
17
Use CSS Resize to Create Resizable Elements
1m 14s
18
Use CSS aspect-ratio to prescribe an aspect ratio for an element
1m 7s

Use CSS Transforms to Create Configurable 3D Cuboids

Share this video with your friends

In this lesson, we use CSS transforms to create configurable 3D cuboids.

Using CSS transforms in combination with scoped CSS variables, we are able to configure the height, width, and depth for cuboids without ever having to repeat those styles.

Course

CSS Tips and Tricks

Morpheus

~ 4 years ago

Jhey, this is lovely. How do I get access to these files?

Jhey Tompkinsinstructor

~ 4 years ago

Jhey, this is lovely. How do I get access to these files?

Hey Morpheus!

Thank you so much.

You can grab them in this Github repository.