Skip to content

Commit ccf24cc

Browse files
danhollickdanhollick
committed
3d transform section fixes
1 parent 60e17df commit ccf24cc

File tree

2 files changed

+147
-37
lines changed

2 files changed

+147
-37
lines changed

‎src/components/ClassTable.js

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ export const ClassTable = memo(
4949
transformValue,
5050
custom,
5151
scroll,
52+
showHeading = true,
5253
}) => {
5354
utilities = Object.fromEntries(Object.entries(utilities).filter(filterRules))
5455
let classes = Object.keys(utilities)
@@ -69,10 +70,12 @@ export const ClassTable = memo(
6970
}, [isCollapsed])
7071

7172
return (
72-
<div ref={ref} className="mt-10 relative">
73-
<Heading level={2} id="class-reference" className="relative scroll-mt-[var(--scroll-mt)]">
74-
<span className="sr-only">Quick reference</span>
75-
</Heading>
73+
<div ref={ref} className={clsx('relative', showHeading && 'mt-10')}>
74+
{showHeading && (
75+
<Heading level={2} id="class-reference" className="relative scroll-mt-[var(--scroll-mt)]">
76+
<span className="sr-only">Quick reference</span>
77+
</Heading>
78+
)}
7679
<div className="overflow-x-auto flex -mx-4 sm:-mx-6 md:mx-0">
7780
<div
7881
id="class-table"

‎src/pages/docs/v4-beta.mdx

Lines changed: 140 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ description: Preview what's coming in the next version of Tailwind CSS.
66

77
import { Heading } from '@/components/Heading'
88
import { TipGood, TipBad } from '@/components/Tip'
9+
import {ClassTable} from '@/components/ClassTable'
910

1011
export function ColorPalette() {
1112
const colors = {
@@ -263,7 +264,7 @@ export function ColorPalette() {
263264
return <div className="grid grid-cols-[repeat(17,minmax(0,1fr))] gap-1 md:gap-2">
264265
{
265266
Object.entries(colors).map(([color, values]) =>
266-
<div className="grid grid-cols-1 gap-2">
267+
<div className="grid grid-cols-1 gap-2" key={color}>
267268
{Object.values(values).map(value =>
268269
<div className="aspect-square rounded" style={{backgroundColor:value}}/>
269270
)}
@@ -695,49 +696,153 @@ Browser support for container queries is [really great](https://caniuse.com/css-
695696

696697
We've finally added APIs for doing 3D transforms, like `rotate-x-*`, `rotate-y-*`, `scale-z-*`, `translate-z-*`, and tons more.
697698

698-
{/* Demo here */}
699-
700-
Use the `transform-3d` utility to enable 3D transforms by setting the right `transform-style`:
701-
702-
```html
703-
<div class="transform-3d">
704-
<!-- ... -->
705-
</div>
699+
```html {{ example: true }}
700+
<div class="grid justify-center">
701+
<article class="transition-all relative isolate z-10 flex h-[500px] w-96 [transform-style:_preserve-3d] [transform:rotateX(51deg)_rotateZ(43deg)] flex-col justify-end overflow-hidden rounded-2xl bg-gray-900 px-8 pt-80 pb-8 shadow-xl duration-500 [perspective:800px] [perspective-origin:top_left] hover:-translate-y-4 hover:[transform:rotateX(49deg)__rotateZ(38deg)] hover:shadow-2xl">
702+
<img src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3603&q=80" alt="" class="absolute inset-0 -z-10 size-full object-cover" />
703+
<div class="absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40"></div>
704+
<div class="absolute inset-0 -z-10 rounded-2xl ring-1 ring-gray-900/10 ring-inset"></div>
705+
<div class="flex flex-wrap items-center gap-y-1 overflow-hidden text-sm/6 text-gray-300">
706+
<time dateTime="2020-03-16" class="mr-8">Mar 16, 2020</time>
707+
<div class="-ml-4 flex items-center gap-x-4">
708+
<svg view-box="0 0 2 2" class="-ml-0.5 size-0.5 flex-none fill-white/50"><circle r={1} cx={1} cy={1} /></svg>
709+
<div class="flex gap-x-2.5">
710+
<img src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" class="size-6 flex-none rounded-full bg-white/10" />
711+
Michael Foster
712+
</div>
713+
</div>
714+
</div>
715+
<h3 class="mt-3 text-lg/6 font-semibold text-white">
716+
<span class="absolute inset-0"></span>
717+
Boost your conversion rate
718+
</h3>
719+
</article>
720+
</div>
706721
```
707722

708-
Use the `rotate-x-*` and `rotate-y-*` utilities to rotate elements in 3D space:
709723

710724
```html
711-
<div class="transform-3d rotate-x-45 rotate-y-90">
725+
<article class="relative isolate z-10 flex w-96 **transform-3d rotate-x-51 rotate-z-43 perspective-distant perspective-origin-top-left** flex-col justify-end overflow-hidden rounded-2xl bg-gray-900 px-8 pt-80 pb-8 shadow-xl transition-all duration-500 **hover:-translate-y-4 hover:rotate-x-49 hover:rotate-z-38** hover:shadow-2xl">
712726
<!-- ... -->
713-
</div>
714-
```
715-
716-
Use the `scale-z-*` utilities to scale elements on the z-axis:
717-
718-
```html
719-
<div class="transform-3d scale-z-*">
720-
<!-- ... -->
721-
</div>
727+
</article>
722728
```
723729

730+
Use the `transform-3d` utility to enable 3D transforms by setting the right `transform-style`
731+
732+
733+
#### Rotate
734+
Use the `rotate-x-*`, `rotate-y-*` and `rotate-z-*` utilities to rotate elements in 3D space.
735+
736+
737+
<ClassTable showHeading={false} utilities={{
738+
'rotate-x-0': {'--tw-rotate-x': 'rotateX(0deg)'},
739+
'rotate-x-1': {'--tw-rotate-x': 'rotateX(1deg)'},
740+
'rotate-x-2': {'--tw-rotate-x': 'rotateX(2deg)'},
741+
'rotate-x-3': {'--tw-rotate-x': 'rotateX(3deg)'},
742+
'rotate-x-6': {'--tw-rotate-x': 'rotateX(6deg)'},
743+
'rotate-x-12': {'--tw-rotate-x': 'rotateX(12deg)'},
744+
'rotate-x-45': {'--tw-rotate-x': 'rotateX(45deg)'},
745+
'rotate-x-90': {'--tw-rotate-x': 'rotateX(90deg)'},
746+
'rotate-x-180': {'--tw-rotate-x': 'rotateX(180deg)'},
747+
'rotate-y-0': {'--tw-rotate-y': 'rotateY(0deg)'},
748+
'rotate-y-1': {'--tw-rotate-y': 'rotateY(1deg)'},
749+
'rotate-y-2': {'--tw-rotate-y': 'rotateY(2deg)'},
750+
'rotate-y-3': {'--tw-rotate-y': 'rotateY(3deg)'},
751+
'rotate-y-6': {'--tw-rotate-y': 'rotateY(6deg)'},
752+
'rotate-y-12': {'--tw-rotate-y': 'rotateY(12deg)'},
753+
'rotate-y-45': {'--tw-rotate-y': 'rotateY(45deg)'},
754+
'rotate-y-90': {'--tw-rotate-y': 'rotateY(90deg)'},
755+
'rotate-y-180': {'--tw-rotate-y': 'rotateY(180deg)'},
756+
'rotate-z-0': {'--tw-rotate-z': 'rotateZ(0deg)'},
757+
'rotate-z-1': {'--tw-rotate-z': 'rotateZ(1deg)'},
758+
'rotate-z-2': {'--tw-rotate-z': 'rotateZ(2deg)'},
759+
'rotate-z-3': {'--tw-rotate-z': 'rotateZ(3deg)'},
760+
'rotate-z-6': {'--tw-rotate-z': 'rotateZ(6deg)'},
761+
'rotate-z-12': {'--tw-rotate-z': 'rotateZ(12deg)'},
762+
'rotate-z-45': {'--tw-rotate-z': 'rotateZ(45deg)'},
763+
'rotate-z-90': {'--tw-rotate-z': 'rotateZ(90deg)'},
764+
'rotate-z-180': {'--tw-rotate-z': 'rotateZ(180deg)'},
765+
}}/>
766+
767+
#### Scale
768+
769+
Use the `scale-z-*` utilities to scale elements on the z-axis.
770+
771+
<ClassTable showHeading={false} utilities={{
772+
'scale-z-0': {'--tw-scale-z': '0%'},
773+
'scale-z-50': {'--tw-scale-z': '50%'},
774+
'scale-z-75': {'--tw-scale-z': '75%'},
775+
'scale-z-90': {'--tw-scale-z': '90%'},
776+
'scale-z-95': {'--tw-scale-z': '95%'},
777+
'scale-z-100': {'--tw-scale-z': '100%'},
778+
'scale-z-105': {'--tw-scale-z': '105%'},
779+
'scale-z-110': {'--tw-scale-z': '110%'},
780+
'scale-z-125': {'--tw-scale-z': '125%'},
781+
'scale-z-150': {'--tw-scale-z': '150%'},
782+
'scale-z-200': {'--tw-scale-z': '200%'},
783+
784+
}}/>
785+
786+
#### Translate
724787
Use `translate-z-*` to move elements closer or further away:
725788

726-
```html
727-
<div class="transform-3d translate-z-*">
728-
<!-- ... -->
729-
</div>
730-
```
731-
789+
<ClassTable showHeading={false} utilities={{
790+
'translate-z-0': {'--tw-translate-z': 'calc(var(--spacing) * 0)'},
791+
'translate-z-0.5': {'--tw-translate-z': 'calc(var(--spacing) * 0.5)'},
792+
'translate-z-1': {'--tw-translate-z': 'calc(var(--spacing) * 1)'},
793+
'translate-z-1.5': {'--tw-translate-z': 'calc(var(--spacing) * 1.5)'},
794+
'translate-z-2': {'--tw-translate-z': 'calc(var(--spacing) * 2)'},
795+
'translate-z-2.5': {'--tw-translate-z': 'calc(var(--spacing) * 2.5)'},
796+
'translate-z-3': {'--tw-translate-z': 'calc(var(--spacing) * 3)'},
797+
'translate-z-3.5': {'--tw-translate-z': 'calc(var(--spacing) * 3.5)'},
798+
'translate-z-4': {'--tw-translate-z': 'calc(var(--spacing) * 4)'},
799+
'translate-z-5': {'--tw-translate-z': 'calc(var(--spacing) * 5)'},
800+
'translate-z-6': {'--tw-translate-z': 'calc(var(--spacing) * 6)'},
801+
'translate-z-7': {'--tw-translate-z': 'calc(var(--spacing) * 7)'},
802+
'translate-z-8': {'--tw-translate-z': 'calc(var(--spacing) * 8)'},
803+
'translate-z-9': {'--tw-translate-z': 'calc(var(--spacing) * 9)'},
804+
'translate-z-10': {'--tw-translate-z': 'calc(var(--spacing) * 10)'},
805+
'translate-z-11': {'--tw-translate-z': 'calc(var(--spacing) * 11)'},
806+
'translate-z-12': {'--tw-translate-z': 'calc(var(--spacing) * 12)'},
807+
'translate-z-14': {'--tw-translate-z': 'calc(var(--spacing) * 14)'},
808+
'translate-z-16': {'--tw-translate-z': 'calc(var(--spacing) * 16)'},
809+
'translate-z-20': {'--tw-translate-z': 'calc(var(--spacing) * 20)'},
810+
'translate-z-24': {'--tw-translate-z': 'calc(var(--spacing) * 24)'},
811+
'translate-z-28': {'--tw-translate-z': 'calc(var(--spacing) * 28)'},
812+
'translate-z-32': {'--tw-translate-z': 'calc(var(--spacing) * 32)'},
813+
'translate-z-36': {'--tw-translate-z': 'calc(var(--spacing) * 36)'},
814+
'translate-z-40': {'--tw-translate-z': 'calc(var(--spacing) * 40)'},
815+
'translate-z-44': {'--tw-translate-z': 'calc(var(--spacing) * 44)'},
816+
'translate-z-48': {'--tw-translate-z': 'calc(var(--spacing) * 48)'},
817+
'translate-z-52': {'--tw-translate-z': 'calc(var(--spacing) * 52)'},
818+
'translate-z-56': {'--tw-translate-z': 'calc(var(--spacing) * 56)'},
819+
'translate-z-60': {'--tw-translate-z': 'calc(var(--spacing) * 60)'},
820+
'translate-z-64': {'--tw-translate-z': 'calc(var(--spacing) * 64)'},
821+
'translate-z-72': {'--tw-translate-z': 'calc(var(--spacing) * 72)'},
822+
'translate-z-80': {'--tw-translate-z': 'calc(var(--spacing) * 80)'},
823+
'translate-z-96': {'--tw-translate-z': 'calc(var(--spacing) * 96)'},
824+
'translate-z-px': {'--tw-translate-z': '1px'},
825+
}}/>
826+
827+
#### Perspective
732828
Use utilities like `perspective-near`, `perspective-normal`, and `perspective-distant` along with the new `perspective-origin-*` utilities to control the perspective used for 3D transforms:
733829

734-
```html
735-
<div class="perspective-dramatic perspective-origin-top">
736-
<div class="transform-3d rotate-x-45 rotate-y-90">
737-
<!-- ... -->
738-
</div>
739-
</div>
740-
```
830+
<ClassTable showHeading={false} utilities={{
831+
'perspective-dramatic': {'perspective': '100px'},
832+
'perspective-near': {'perspective': '300px'},
833+
'perspective-normal': {'perspective': '500px'},
834+
'perspective-midrange': {'perspective': '800px'},
835+
'perspective-distant': {'perspective': '1200px'},
836+
'perspective-origin-bottom': {'perspective-origin': 'bottom'},
837+
'perspective-origin-bottom-left': {'perspective-origin': 'bottom-left'},
838+
'perspective-origin-bottom-right': {'perspective-origin': 'bottom-right'},
839+
'perspective-origin-center': {'perspective-origin': 'center'},
840+
'perspective-origin-left': {'perspective-origin': 'left'},
841+
'perspective-origin-right': {'perspective-origin': 'right'},
842+
'perspective-origin-top': {'perspective-origin': 'top'},
843+
'perspective-origin-top-right': {'perspective-origin': 'top-right'},
844+
'perspective-origin-top-left': {'perspective-origin': 'top-left'},
845+
}}/>
741846

742847
Then use the `backface-visible` and `backface-hidden` utilities to control an element's backface visibility:
743848

@@ -748,6 +853,8 @@ Then use the `backface-visible` and `backface-hidden` utilities to control an el
748853
```
749854

750855

856+
857+
751858
### Linear gradient angles
752859

753860
Linear gradients now support angles as values, so you can use utilities like `bg-linear-45` to create a gradient on a 45 degree angle:

0 commit comments

Comments
 (0)