[{"data":1,"prerenderedAt":1461},["ShallowReactive",2],{"guide-css-3d-transforms-guide":3},{"id":4,"title":5,"body":6,"date":1453,"description":1454,"extension":1455,"meta":1456,"navigation":90,"path":1457,"readingTime":102,"seo":1458,"stem":1459,"__hash__":1460},"guides\u002Fguides\u002Fcss-3d-transforms-guide.md","CSS 3D Transforms: Complete Guide",{"type":7,"value":8,"toc":1440},"minimark",[9,14,27,30,34,37,128,148,152,158,210,213,217,307,364,367,371,381,660,663,691,695,703,1115,1125,1129,1134,1333,1342,1346,1380,1384,1424,1428,1436],[10,11,13],"h2",{"id":12},"what-are-3d-css-transforms","What Are 3D CSS Transforms?",[15,16,17,18,22,23,26],"p",{},"CSS 3D transforms extend the 2D ",[19,20,21],"code",{},"transform"," property with a third axis (Z), allowing you to position, rotate, and scale elements in three-dimensional space. Combined with the ",[19,24,25],{},"perspective"," property, they create realistic depth effects — card flips, rotating carousels, unfolding panels — all without JavaScript or canvas.",[15,28,29],{},"The browser composites 3D-transformed elements on the GPU, making them inherently smooth and performant for animation.",[10,31,33],{"id":32},"the-z-axis-and-perspective","The Z Axis and Perspective",[15,35,36],{},"Before 3D transforms work visually, you need perspective. Without it, Z-axis changes have no apparent depth:",[38,39,44],"pre",{"className":40,"code":41,"language":42,"meta":43,"style":43},"language-css shiki shiki-themes github-light github-dark",".scene {\n  perspective: 800px;\n}\n\n.card {\n  transform: rotateY(45deg);\n}\n","css","",[19,45,46,59,79,85,92,100,123],{"__ignoreMap":43},[47,48,51,55],"span",{"class":49,"line":50},"line",1,[47,52,54],{"class":53},"sScJk",".scene",[47,56,58],{"class":57},"sVt8B"," {\n",[47,60,62,66,69,72,76],{"class":49,"line":61},2,[47,63,65],{"class":64},"sj4cs","  perspective",[47,67,68],{"class":57},": ",[47,70,71],{"class":64},"800",[47,73,75],{"class":74},"szBVR","px",[47,77,78],{"class":57},";\n",[47,80,82],{"class":49,"line":81},3,[47,83,84],{"class":57},"}\n",[47,86,88],{"class":49,"line":87},4,[47,89,91],{"emptyLinePlaceholder":90},true,"\n",[47,93,95,98],{"class":49,"line":94},5,[47,96,97],{"class":53},".card",[47,99,58],{"class":57},[47,101,103,106,108,111,114,117,120],{"class":49,"line":102},6,[47,104,105],{"class":64},"  transform",[47,107,68],{"class":57},[47,109,110],{"class":64},"rotateY",[47,112,113],{"class":57},"(",[47,115,116],{"class":64},"45",[47,118,119],{"class":74},"deg",[47,121,122],{"class":57},");\n",[47,124,126],{"class":49,"line":125},7,[47,127,84],{"class":57},[129,130,131,140],"ul",{},[132,133,134,139],"li",{},[135,136,137],"strong",{},[19,138,25],{}," on the parent defines the viewing distance. Lower values (200px) produce dramatic distortion; higher values (2000px) look nearly flat. 600–1000px is a natural range.",[132,141,142,147],{},[135,143,144],{},[19,145,146],{},"transform: perspective()"," on the element itself works similarly but applies individually — each element gets its own vanishing point.",[149,150,151],"h3",{"id":151},"perspective-origin",[15,153,154,155,157],{},"Control where the viewer looks by setting ",[19,156,151],{}," on the parent:",[38,159,161],{"className":40,"code":160,"language":42,"meta":43,"style":43},".scene {\n  perspective: 800px;\n  perspective-origin: 50% 50%; \u002F* default: center *\u002F\n}\n",[19,162,163,169,181,206],{"__ignoreMap":43},[47,164,165,167],{"class":49,"line":50},[47,166,54],{"class":53},[47,168,58],{"class":57},[47,170,171,173,175,177,179],{"class":49,"line":61},[47,172,65],{"class":64},[47,174,68],{"class":57},[47,176,71],{"class":64},[47,178,75],{"class":74},[47,180,78],{"class":57},[47,182,183,186,188,191,194,197,199,202],{"class":49,"line":81},[47,184,185],{"class":64},"  perspective-origin",[47,187,68],{"class":57},[47,189,190],{"class":64},"50",[47,192,193],{"class":74},"%",[47,195,196],{"class":64}," 50",[47,198,193],{"class":74},[47,200,201],{"class":57},"; ",[47,203,205],{"class":204},"sJ8bj","\u002F* default: center *\u002F\n",[47,207,208],{"class":49,"line":87},[47,209,84],{"class":57},[15,211,212],{},"Changing this offset shifts the 3D effect as if you moved your head.",[10,214,216],{"id":215},"_3d-transform-functions","3D Transform Functions",[218,219,220,233],"table",{},[221,222,223],"thead",{},[224,225,226,230],"tr",{},[227,228,229],"th",{},"Function",[227,231,232],{},"Effect",[234,235,236,247,257,267,277,287,297],"tbody",{},[224,237,238,244],{},[239,240,241],"td",{},[19,242,243],{},"translate3d(tx, ty, tz)",[239,245,246],{},"Moves along all three axes",[224,248,249,254],{},[239,250,251],{},[19,252,253],{},"translateZ(tz)",[239,255,256],{},"Moves closer or farther along Z",[224,258,259,264],{},[239,260,261],{},[19,262,263],{},"rotateX(angle)",[239,265,266],{},"Rotates around the horizontal axis",[224,268,269,274],{},[239,270,271],{},[19,272,273],{},"rotateY(angle)",[239,275,276],{},"Rotates around the vertical axis",[224,278,279,284],{},[239,280,281],{},[19,282,283],{},"rotateZ(angle)",[239,285,286],{},"Rotates around the depth axis (same as 2D rotate)",[224,288,289,294],{},[239,290,291],{},[19,292,293],{},"scale3d(sx, sy, sz)",[239,295,296],{},"Scales on all three axes",[224,298,299,304],{},[239,300,301],{},[19,302,303],{},"scaleZ(sz)",[239,305,306],{},"Scales along Z (only visible with child content)",[38,308,310],{"className":40,"code":309,"language":42,"meta":43,"style":43},".box {\n  transform: rotateX(30deg) rotateY(-20deg) translateZ(50px);\n}\n",[19,311,312,319,360],{"__ignoreMap":43},[47,313,314,317],{"class":49,"line":50},[47,315,316],{"class":53},".box",[47,318,58],{"class":57},[47,320,321,323,325,328,330,333,335,338,340,342,345,347,349,352,354,356,358],{"class":49,"line":61},[47,322,105],{"class":64},[47,324,68],{"class":57},[47,326,327],{"class":64},"rotateX",[47,329,113],{"class":57},[47,331,332],{"class":64},"30",[47,334,119],{"class":74},[47,336,337],{"class":57},") ",[47,339,110],{"class":64},[47,341,113],{"class":57},[47,343,344],{"class":64},"-20",[47,346,119],{"class":74},[47,348,337],{"class":57},[47,350,351],{"class":64},"translateZ",[47,353,113],{"class":57},[47,355,190],{"class":64},[47,357,75],{"class":74},[47,359,122],{"class":57},[47,361,362],{"class":49,"line":81},[47,363,84],{"class":57},[15,365,366],{},"Order matters — transforms apply right-to-left, just like matrix multiplication.",[10,368,370],{"id":369},"card-flip-effect","Card Flip Effect",[15,372,373,374,376,377,380],{},"The classic card flip uses ",[19,375,110],{}," with ",[19,378,379],{},"backface-visibility",":",[38,382,384],{"className":40,"code":383,"language":42,"meta":43,"style":43},".card-container {\n  perspective: 800px;\n  width: 300px;\n  height: 400px;\n}\n\n.card {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  transition: transform 0.6s;\n  transform-style: preserve-3d;\n}\n\n.card-container:hover .card {\n  transform: rotateY(180deg);\n}\n\n.card-front,\n.card-back {\n  position: absolute;\n  inset: 0;\n  backface-visibility: hidden;\n}\n\n.card-back {\n  transform: rotateY(180deg);\n}\n",[19,385,386,393,405,419,433,437,441,447,460,474,487,504,517,522,527,538,556,561,566,575,583,595,608,621,626,631,638,655],{"__ignoreMap":43},[47,387,388,391],{"class":49,"line":50},[47,389,390],{"class":53},".card-container",[47,392,58],{"class":57},[47,394,395,397,399,401,403],{"class":49,"line":61},[47,396,65],{"class":64},[47,398,68],{"class":57},[47,400,71],{"class":64},[47,402,75],{"class":74},[47,404,78],{"class":57},[47,406,407,410,412,415,417],{"class":49,"line":81},[47,408,409],{"class":64},"  width",[47,411,68],{"class":57},[47,413,414],{"class":64},"300",[47,416,75],{"class":74},[47,418,78],{"class":57},[47,420,421,424,426,429,431],{"class":49,"line":87},[47,422,423],{"class":64},"  height",[47,425,68],{"class":57},[47,427,428],{"class":64},"400",[47,430,75],{"class":74},[47,432,78],{"class":57},[47,434,435],{"class":49,"line":94},[47,436,84],{"class":57},[47,438,439],{"class":49,"line":102},[47,440,91],{"emptyLinePlaceholder":90},[47,442,443,445],{"class":49,"line":125},[47,444,97],{"class":53},[47,446,58],{"class":57},[47,448,450,453,455,458],{"class":49,"line":449},8,[47,451,452],{"class":64},"  position",[47,454,68],{"class":57},[47,456,457],{"class":64},"relative",[47,459,78],{"class":57},[47,461,463,465,467,470,472],{"class":49,"line":462},9,[47,464,409],{"class":64},[47,466,68],{"class":57},[47,468,469],{"class":64},"100",[47,471,193],{"class":74},[47,473,78],{"class":57},[47,475,477,479,481,483,485],{"class":49,"line":476},10,[47,478,423],{"class":64},[47,480,68],{"class":57},[47,482,469],{"class":64},[47,484,193],{"class":74},[47,486,78],{"class":57},[47,488,490,493,496,499,502],{"class":49,"line":489},11,[47,491,492],{"class":64},"  transition",[47,494,495],{"class":57},": transform ",[47,497,498],{"class":64},"0.6",[47,500,501],{"class":74},"s",[47,503,78],{"class":57},[47,505,507,510,512,515],{"class":49,"line":506},12,[47,508,509],{"class":64},"  transform-style",[47,511,68],{"class":57},[47,513,514],{"class":64},"preserve-3d",[47,516,78],{"class":57},[47,518,520],{"class":49,"line":519},13,[47,521,84],{"class":57},[47,523,525],{"class":49,"line":524},14,[47,526,91],{"emptyLinePlaceholder":90},[47,528,530,533,536],{"class":49,"line":529},15,[47,531,532],{"class":53},".card-container:hover",[47,534,535],{"class":53}," .card",[47,537,58],{"class":57},[47,539,541,543,545,547,549,552,554],{"class":49,"line":540},16,[47,542,105],{"class":64},[47,544,68],{"class":57},[47,546,110],{"class":64},[47,548,113],{"class":57},[47,550,551],{"class":64},"180",[47,553,119],{"class":74},[47,555,122],{"class":57},[47,557,559],{"class":49,"line":558},17,[47,560,84],{"class":57},[47,562,564],{"class":49,"line":563},18,[47,565,91],{"emptyLinePlaceholder":90},[47,567,569,572],{"class":49,"line":568},19,[47,570,571],{"class":53},".card-front",[47,573,574],{"class":57},",\n",[47,576,578,581],{"class":49,"line":577},20,[47,579,580],{"class":53},".card-back",[47,582,58],{"class":57},[47,584,586,588,590,593],{"class":49,"line":585},21,[47,587,452],{"class":64},[47,589,68],{"class":57},[47,591,592],{"class":64},"absolute",[47,594,78],{"class":57},[47,596,598,601,603,606],{"class":49,"line":597},22,[47,599,600],{"class":64},"  inset",[47,602,68],{"class":57},[47,604,605],{"class":64},"0",[47,607,78],{"class":57},[47,609,611,614,616,619],{"class":49,"line":610},23,[47,612,613],{"class":64},"  backface-visibility",[47,615,68],{"class":57},[47,617,618],{"class":64},"hidden",[47,620,78],{"class":57},[47,622,624],{"class":49,"line":623},24,[47,625,84],{"class":57},[47,627,629],{"class":49,"line":628},25,[47,630,91],{"emptyLinePlaceholder":90},[47,632,634,636],{"class":49,"line":633},26,[47,635,580],{"class":53},[47,637,58],{"class":57},[47,639,641,643,645,647,649,651,653],{"class":49,"line":640},27,[47,642,105],{"class":64},[47,644,68],{"class":57},[47,646,110],{"class":64},[47,648,113],{"class":57},[47,650,551],{"class":64},[47,652,119],{"class":74},[47,654,122],{"class":57},[47,656,658],{"class":49,"line":657},28,[47,659,84],{"class":57},[15,661,662],{},"Key points:",[129,664,665,676,684],{},[132,666,667,672,673,675],{},[135,668,669],{},[19,670,671],{},"transform-style: preserve-3d"," on ",[19,674,97],{}," keeps front and back in 3D space rather than flattening them.",[132,677,678,683],{},[135,679,680],{},[19,681,682],{},"backface-visibility: hidden"," prevents seeing the reverse side bleed through during rotation.",[132,685,686,687,690],{},"The back face is pre-rotated ",[19,688,689],{},"180deg"," so it faces the viewer when the card flips.",[10,692,694],{"id":693},"_3d-carousel","3D Carousel",[15,696,697,698,700,701,380],{},"A carousel places items in a ring using ",[19,699,110],{}," and ",[19,702,351],{},[38,704,706],{"className":40,"code":705,"language":42,"meta":43,"style":43},".carousel {\n  position: relative;\n  width: 200px;\n  height: 200px;\n  transform-style: preserve-3d;\n  animation: spin 12s linear infinite;\n}\n\n.carousel .face {\n  position: absolute;\n  width: 200px;\n  height: 200px;\n}\n\n\u002F* 6-sided carousel: each face rotated 60deg apart, pushed out by Z *\u002F\n.carousel .face:nth-child(1) { transform: rotateY(0deg) translateZ(200px); }\n.carousel .face:nth-child(2) { transform: rotateY(60deg) translateZ(200px); }\n.carousel .face:nth-child(3) { transform: rotateY(120deg) translateZ(200px); }\n.carousel .face:nth-child(4) { transform: rotateY(180deg) translateZ(200px); }\n.carousel .face:nth-child(5) { transform: rotateY(240deg) translateZ(200px); }\n.carousel .face:nth-child(6) { transform: rotateY(300deg) translateZ(200px); }\n\n@keyframes spin {\n  to { transform: rotateY(360deg); }\n}\n",[19,707,708,715,725,738,750,760,781,785,789,798,808,820,832,836,840,845,885,923,961,998,1036,1073,1077,1088,1111],{"__ignoreMap":43},[47,709,710,713],{"class":49,"line":50},[47,711,712],{"class":53},".carousel",[47,714,58],{"class":57},[47,716,717,719,721,723],{"class":49,"line":61},[47,718,452],{"class":64},[47,720,68],{"class":57},[47,722,457],{"class":64},[47,724,78],{"class":57},[47,726,727,729,731,734,736],{"class":49,"line":81},[47,728,409],{"class":64},[47,730,68],{"class":57},[47,732,733],{"class":64},"200",[47,735,75],{"class":74},[47,737,78],{"class":57},[47,739,740,742,744,746,748],{"class":49,"line":87},[47,741,423],{"class":64},[47,743,68],{"class":57},[47,745,733],{"class":64},[47,747,75],{"class":74},[47,749,78],{"class":57},[47,751,752,754,756,758],{"class":49,"line":94},[47,753,509],{"class":64},[47,755,68],{"class":57},[47,757,514],{"class":64},[47,759,78],{"class":57},[47,761,762,765,768,771,773,776,779],{"class":49,"line":102},[47,763,764],{"class":64},"  animation",[47,766,767],{"class":57},": spin ",[47,769,770],{"class":64},"12",[47,772,501],{"class":74},[47,774,775],{"class":64}," linear",[47,777,778],{"class":64}," infinite",[47,780,78],{"class":57},[47,782,783],{"class":49,"line":125},[47,784,84],{"class":57},[47,786,787],{"class":49,"line":449},[47,788,91],{"emptyLinePlaceholder":90},[47,790,791,793,796],{"class":49,"line":462},[47,792,712],{"class":53},[47,794,795],{"class":53}," .face",[47,797,58],{"class":57},[47,799,800,802,804,806],{"class":49,"line":476},[47,801,452],{"class":64},[47,803,68],{"class":57},[47,805,592],{"class":64},[47,807,78],{"class":57},[47,809,810,812,814,816,818],{"class":49,"line":489},[47,811,409],{"class":64},[47,813,68],{"class":57},[47,815,733],{"class":64},[47,817,75],{"class":74},[47,819,78],{"class":57},[47,821,822,824,826,828,830],{"class":49,"line":506},[47,823,423],{"class":64},[47,825,68],{"class":57},[47,827,733],{"class":64},[47,829,75],{"class":74},[47,831,78],{"class":57},[47,833,834],{"class":49,"line":519},[47,835,84],{"class":57},[47,837,838],{"class":49,"line":524},[47,839,91],{"emptyLinePlaceholder":90},[47,841,842],{"class":49,"line":529},[47,843,844],{"class":204},"\u002F* 6-sided carousel: each face rotated 60deg apart, pushed out by Z *\u002F\n",[47,846,847,849,852,854,857,860,862,864,866,868,870,872,874,876,878,880,882],{"class":49,"line":540},[47,848,712],{"class":53},[47,850,851],{"class":53}," .face:nth-child",[47,853,113],{"class":57},[47,855,856],{"class":64},"1",[47,858,859],{"class":57},") { ",[47,861,21],{"class":64},[47,863,68],{"class":57},[47,865,110],{"class":64},[47,867,113],{"class":57},[47,869,605],{"class":64},[47,871,119],{"class":74},[47,873,337],{"class":57},[47,875,351],{"class":64},[47,877,113],{"class":57},[47,879,733],{"class":64},[47,881,75],{"class":74},[47,883,884],{"class":57},"); }\n",[47,886,887,889,891,893,896,898,900,902,904,906,909,911,913,915,917,919,921],{"class":49,"line":558},[47,888,712],{"class":53},[47,890,851],{"class":53},[47,892,113],{"class":57},[47,894,895],{"class":64},"2",[47,897,859],{"class":57},[47,899,21],{"class":64},[47,901,68],{"class":57},[47,903,110],{"class":64},[47,905,113],{"class":57},[47,907,908],{"class":64},"60",[47,910,119],{"class":74},[47,912,337],{"class":57},[47,914,351],{"class":64},[47,916,113],{"class":57},[47,918,733],{"class":64},[47,920,75],{"class":74},[47,922,884],{"class":57},[47,924,925,927,929,931,934,936,938,940,942,944,947,949,951,953,955,957,959],{"class":49,"line":563},[47,926,712],{"class":53},[47,928,851],{"class":53},[47,930,113],{"class":57},[47,932,933],{"class":64},"3",[47,935,859],{"class":57},[47,937,21],{"class":64},[47,939,68],{"class":57},[47,941,110],{"class":64},[47,943,113],{"class":57},[47,945,946],{"class":64},"120",[47,948,119],{"class":74},[47,950,337],{"class":57},[47,952,351],{"class":64},[47,954,113],{"class":57},[47,956,733],{"class":64},[47,958,75],{"class":74},[47,960,884],{"class":57},[47,962,963,965,967,969,972,974,976,978,980,982,984,986,988,990,992,994,996],{"class":49,"line":568},[47,964,712],{"class":53},[47,966,851],{"class":53},[47,968,113],{"class":57},[47,970,971],{"class":64},"4",[47,973,859],{"class":57},[47,975,21],{"class":64},[47,977,68],{"class":57},[47,979,110],{"class":64},[47,981,113],{"class":57},[47,983,551],{"class":64},[47,985,119],{"class":74},[47,987,337],{"class":57},[47,989,351],{"class":64},[47,991,113],{"class":57},[47,993,733],{"class":64},[47,995,75],{"class":74},[47,997,884],{"class":57},[47,999,1000,1002,1004,1006,1009,1011,1013,1015,1017,1019,1022,1024,1026,1028,1030,1032,1034],{"class":49,"line":577},[47,1001,712],{"class":53},[47,1003,851],{"class":53},[47,1005,113],{"class":57},[47,1007,1008],{"class":64},"5",[47,1010,859],{"class":57},[47,1012,21],{"class":64},[47,1014,68],{"class":57},[47,1016,110],{"class":64},[47,1018,113],{"class":57},[47,1020,1021],{"class":64},"240",[47,1023,119],{"class":74},[47,1025,337],{"class":57},[47,1027,351],{"class":64},[47,1029,113],{"class":57},[47,1031,733],{"class":64},[47,1033,75],{"class":74},[47,1035,884],{"class":57},[47,1037,1038,1040,1042,1044,1047,1049,1051,1053,1055,1057,1059,1061,1063,1065,1067,1069,1071],{"class":49,"line":585},[47,1039,712],{"class":53},[47,1041,851],{"class":53},[47,1043,113],{"class":57},[47,1045,1046],{"class":64},"6",[47,1048,859],{"class":57},[47,1050,21],{"class":64},[47,1052,68],{"class":57},[47,1054,110],{"class":64},[47,1056,113],{"class":57},[47,1058,414],{"class":64},[47,1060,119],{"class":74},[47,1062,337],{"class":57},[47,1064,351],{"class":64},[47,1066,113],{"class":57},[47,1068,733],{"class":64},[47,1070,75],{"class":74},[47,1072,884],{"class":57},[47,1074,1075],{"class":49,"line":597},[47,1076,91],{"emptyLinePlaceholder":90},[47,1078,1079,1082,1086],{"class":49,"line":610},[47,1080,1081],{"class":74},"@keyframes",[47,1083,1085],{"class":1084},"s4XuR"," spin",[47,1087,58],{"class":57},[47,1089,1090,1093,1096,1098,1100,1102,1104,1107,1109],{"class":49,"line":623},[47,1091,1092],{"class":53},"  to",[47,1094,1095],{"class":57}," { ",[47,1097,21],{"class":64},[47,1099,68],{"class":57},[47,1101,110],{"class":64},[47,1103,113],{"class":57},[47,1105,1106],{"class":64},"360",[47,1108,119],{"class":74},[47,1110,884],{"class":57},[47,1112,1113],{"class":49,"line":628},[47,1114,84],{"class":57},[15,1116,1117,1118,1120,1121,1124],{},"The ",[19,1119,351],{}," value determines the carousel radius. For N faces, each rotates by ",[19,1122,1123],{},"360\u002FN"," degrees.",[10,1126,1128],{"id":1127},"_3d-cube","3D Cube",[15,1130,1131,1132,380],{},"A cube is a carousel with top and bottom faces added via ",[19,1133,327],{},[38,1135,1137],{"className":40,"code":1136,"language":42,"meta":43,"style":43},".cube .front  { transform: translateZ(100px); }\n.cube .back   { transform: rotateY(180deg) translateZ(100px); }\n.cube .right  { transform: rotateY(90deg) translateZ(100px); }\n.cube .left   { transform: rotateY(-90deg) translateZ(100px); }\n.cube .top    { transform: rotateX(90deg) translateZ(100px); }\n.cube .bottom { transform: rotateX(-90deg) translateZ(100px); }\n",[19,1138,1139,1164,1198,1232,1266,1300],{"__ignoreMap":43},[47,1140,1141,1144,1147,1150,1152,1154,1156,1158,1160,1162],{"class":49,"line":50},[47,1142,1143],{"class":53},".cube",[47,1145,1146],{"class":53}," .front",[47,1148,1149],{"class":57},"  { ",[47,1151,21],{"class":64},[47,1153,68],{"class":57},[47,1155,351],{"class":64},[47,1157,113],{"class":57},[47,1159,469],{"class":64},[47,1161,75],{"class":74},[47,1163,884],{"class":57},[47,1165,1166,1168,1171,1174,1176,1178,1180,1182,1184,1186,1188,1190,1192,1194,1196],{"class":49,"line":61},[47,1167,1143],{"class":53},[47,1169,1170],{"class":53}," .back",[47,1172,1173],{"class":57},"   { ",[47,1175,21],{"class":64},[47,1177,68],{"class":57},[47,1179,110],{"class":64},[47,1181,113],{"class":57},[47,1183,551],{"class":64},[47,1185,119],{"class":74},[47,1187,337],{"class":57},[47,1189,351],{"class":64},[47,1191,113],{"class":57},[47,1193,469],{"class":64},[47,1195,75],{"class":74},[47,1197,884],{"class":57},[47,1199,1200,1202,1205,1207,1209,1211,1213,1215,1218,1220,1222,1224,1226,1228,1230],{"class":49,"line":81},[47,1201,1143],{"class":53},[47,1203,1204],{"class":53}," .right",[47,1206,1149],{"class":57},[47,1208,21],{"class":64},[47,1210,68],{"class":57},[47,1212,110],{"class":64},[47,1214,113],{"class":57},[47,1216,1217],{"class":64},"90",[47,1219,119],{"class":74},[47,1221,337],{"class":57},[47,1223,351],{"class":64},[47,1225,113],{"class":57},[47,1227,469],{"class":64},[47,1229,75],{"class":74},[47,1231,884],{"class":57},[47,1233,1234,1236,1239,1241,1243,1245,1247,1249,1252,1254,1256,1258,1260,1262,1264],{"class":49,"line":87},[47,1235,1143],{"class":53},[47,1237,1238],{"class":53}," .left",[47,1240,1173],{"class":57},[47,1242,21],{"class":64},[47,1244,68],{"class":57},[47,1246,110],{"class":64},[47,1248,113],{"class":57},[47,1250,1251],{"class":64},"-90",[47,1253,119],{"class":74},[47,1255,337],{"class":57},[47,1257,351],{"class":64},[47,1259,113],{"class":57},[47,1261,469],{"class":64},[47,1263,75],{"class":74},[47,1265,884],{"class":57},[47,1267,1268,1270,1273,1276,1278,1280,1282,1284,1286,1288,1290,1292,1294,1296,1298],{"class":49,"line":94},[47,1269,1143],{"class":53},[47,1271,1272],{"class":53}," .top",[47,1274,1275],{"class":57},"    { ",[47,1277,21],{"class":64},[47,1279,68],{"class":57},[47,1281,327],{"class":64},[47,1283,113],{"class":57},[47,1285,1217],{"class":64},[47,1287,119],{"class":74},[47,1289,337],{"class":57},[47,1291,351],{"class":64},[47,1293,113],{"class":57},[47,1295,469],{"class":64},[47,1297,75],{"class":74},[47,1299,884],{"class":57},[47,1301,1302,1304,1307,1309,1311,1313,1315,1317,1319,1321,1323,1325,1327,1329,1331],{"class":49,"line":102},[47,1303,1143],{"class":53},[47,1305,1306],{"class":53}," .bottom",[47,1308,1095],{"class":57},[47,1310,21],{"class":64},[47,1312,68],{"class":57},[47,1314,327],{"class":64},[47,1316,113],{"class":57},[47,1318,1251],{"class":64},[47,1320,119],{"class":74},[47,1322,337],{"class":57},[47,1324,351],{"class":64},[47,1326,113],{"class":57},[47,1328,469],{"class":64},[47,1330,75],{"class":74},[47,1332,884],{"class":57},[15,1334,1117,1335,1337,1338,1341],{},[19,1336,351],{}," value should equal half the cube's side length — ",[19,1339,1340],{},"100px"," for a 200×200×200 cube.",[10,1343,1345],{"id":1344},"common-pitfalls","Common Pitfalls",[129,1347,1348,1356,1372],{},[132,1349,1350,1355],{},[135,1351,1352,1353],{},"Missing ",[19,1354,671],{}," — without it, child elements are flattened into the parent's 2D plane and Z-axis transforms disappear.",[132,1357,1358,1364,1365,1367,1368,1371],{},[135,1359,1360,1363],{},[19,1361,1362],{},"overflow: hidden"," breaks 3D"," — setting ",[19,1366,1362],{}," on a 3D-transformed element flattens its children. Use ",[19,1369,1370],{},"clip-path"," instead if you need to clip.",[132,1373,1374,1379],{},[135,1375,1376,1378],{},[19,1377,379],{}," on the wrong element"," — it belongs on each face, not the container.",[10,1381,1383],{"id":1382},"key-takeaways","Key Takeaways",[129,1385,1386,1389,1394,1399,1407,1416],{},[132,1387,1388],{},"3D transforms add a Z axis for positioning, rotating, and scaling in depth.",[132,1390,1391,1393],{},[19,1392,25],{}," on a parent creates the illusion of depth; lower values are more dramatic.",[132,1395,1396,1398],{},[19,1397,671],{}," keeps children in 3D space — without it, everything flattens.",[132,1400,1401,1402,376,1404,1406],{},"Card flips combine ",[19,1403,110],{},[19,1405,682],{}," on each face.",[132,1408,1409,1410,700,1413,1415],{},"Carousels and cubes distribute faces evenly using ",[19,1411,1412],{},"rotateY\u002FN",[19,1414,351],{},".",[132,1417,1418,1420,1421,1423],{},[19,1419,1362],{}," destroys 3D rendering — use ",[19,1422,1370],{}," for clipping instead.",[10,1425,1427],{"id":1426},"try-it-yourself","Try It Yourself",[15,1429,1430,1431,1415],{},"Build 3D transform effects visually with the ",[1432,1433,1435],"a",{"href":1434},"\u002Ftools\u002Fcss-transform","CSS Transform Tool",[1437,1438,1439],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":43,"searchDepth":61,"depth":61,"links":1441},[1442,1443,1446,1447,1448,1449,1450,1451,1452],{"id":12,"depth":61,"text":13},{"id":32,"depth":61,"text":33,"children":1444},[1445],{"id":151,"depth":81,"text":151},{"id":215,"depth":61,"text":216},{"id":369,"depth":61,"text":370},{"id":693,"depth":61,"text":694},{"id":1127,"depth":61,"text":1128},{"id":1344,"depth":61,"text":1345},{"id":1382,"depth":61,"text":1383},{"id":1426,"depth":61,"text":1427},"2026-05-28","Build card flips, carousels, and 3D cubes using CSS perspective and transform3d properties.","md",{"immutable":90},"\u002Fguides\u002Fcss-3d-transforms-guide",{"title":5,"description":1454},"guides\u002Fcss-3d-transforms-guide","gZMC9k4PcWu8dKbU2NJcYVy4iISoW3JvAhpTK59bZuU",1780401332659]