[{"data":1,"prerenderedAt":1003},["ShallowReactive",2],{"guide-css-transform-guide":3},{"id":4,"title":5,"body":6,"date":995,"description":996,"extension":997,"meta":998,"navigation":110,"path":999,"readingTime":126,"seo":1000,"stem":1001,"__hash__":1002},"guides\u002Fguides\u002Fcss-transform-guide.md","CSS Transform Guide",{"type":7,"value":8,"toc":977},"minimark",[9,14,18,21,72,76,79,84,90,141,156,160,166,195,226,230,236,295,301,305,311,340,343,347,354,376,382,386,389,418,426,433,437,444,500,506,509,518,563,634,640,644,666,756,762,766,769,838,848,891,895,941,945,953,957,973],[10,11,13],"h2",{"id":12},"what-is-css-transform","What Is CSS Transform?",[15,16,17],"p",{},"CSS transforms let you move, rotate, scale, and skew elements without affecting the document flow. The element stays in its original position for layout purposes — only its visual rendering changes.",[15,19,20],{},"This means you can animate a button hover, flip a card, or zoom an image without causing the rest of the page to reflow.",[22,23,28],"pre",{"className":24,"code":25,"language":26,"meta":27,"style":27},"language-css shiki shiki-themes github-light github-dark",".card:hover {\n  transform: scale(1.05);\n}\n","css","",[29,30,31,44,66],"code",{"__ignoreMap":27},[32,33,36,40],"span",{"class":34,"line":35},"line",1,[32,37,39],{"class":38},"sScJk",".card:hover",[32,41,43],{"class":42},"sVt8B"," {\n",[32,45,47,51,54,57,60,63],{"class":34,"line":46},2,[32,48,50],{"class":49},"sj4cs","  transform",[32,52,53],{"class":42},": ",[32,55,56],{"class":49},"scale",[32,58,59],{"class":42},"(",[32,61,62],{"class":49},"1.05",[32,64,65],{"class":42},");\n",[32,67,69],{"class":34,"line":68},3,[32,70,71],{"class":42},"}\n",[10,73,75],{"id":74},"_2d-transform-functions","2D Transform Functions",[15,77,78],{},"CSS provides five core 2D transform functions. Each one manipulates the element in a specific way.",[80,81,83],"h3",{"id":82},"translate-move-it","translate — Move It",[15,85,86,89],{},[29,87,88],{},"translate()"," shifts an element along the X and Y axes. You can specify one value (X only) or two (X and Y).",[22,91,93],{"className":24,"code":92,"language":26,"meta":27,"style":27},"\u002F* Move right 20px and down 10px *\u002F\ntransform: translate(20px, 10px);\n\n\u002F* Move right 50% of the element's own width *\u002F\ntransform: translateX(50%);\n\n\u002F* Move up 30px *\u002F\ntransform: translateY(-30px);\n",[29,94,95,101,106,112,118,124,129,135],{"__ignoreMap":27},[32,96,97],{"class":34,"line":35},[32,98,100],{"class":99},"sJ8bj","\u002F* Move right 20px and down 10px *\u002F\n",[32,102,103],{"class":34,"line":46},[32,104,105],{"class":42},"transform: translate(20px, 10px);\n",[32,107,108],{"class":34,"line":68},[32,109,111],{"emptyLinePlaceholder":110},true,"\n",[32,113,115],{"class":34,"line":114},4,[32,116,117],{"class":99},"\u002F* Move right 50% of the element's own width *\u002F\n",[32,119,121],{"class":34,"line":120},5,[32,122,123],{"class":42},"transform: translateX(50%);\n",[32,125,127],{"class":34,"line":126},6,[32,128,111],{"emptyLinePlaceholder":110},[32,130,132],{"class":34,"line":131},7,[32,133,134],{"class":99},"\u002F* Move up 30px *\u002F\n",[32,136,138],{"class":34,"line":137},8,[32,139,140],{"class":42},"transform: translateY(-30px);\n",[15,142,143,144,147,148,151,152,155],{},"Using percentages in ",[29,145,146],{},"translate"," is relative to the element itself — not the parent. That makes ",[29,149,150],{},"translate(-50%, -50%)"," plus ",[29,153,154],{},"position: absolute"," a reliable way to center an element.",[80,157,159],{"id":158},"rotate-spin-it","rotate — Spin It",[15,161,162,165],{},[29,163,164],{},"rotate()"," turns an element around its center point. Positive values spin clockwise; negative values spin counter-clockwise.",[22,167,169],{"className":24,"code":168,"language":26,"meta":27,"style":27},"\u002F* Rotate 45 degrees clockwise *\u002F\ntransform: rotate(45deg);\n\n\u002F* Rotate 90 degrees counter-clockwise *\u002F\ntransform: rotate(-90deg);\n",[29,170,171,176,181,185,190],{"__ignoreMap":27},[32,172,173],{"class":34,"line":35},[32,174,175],{"class":99},"\u002F* Rotate 45 degrees clockwise *\u002F\n",[32,177,178],{"class":34,"line":46},[32,179,180],{"class":42},"transform: rotate(45deg);\n",[32,182,183],{"class":34,"line":68},[32,184,111],{"emptyLinePlaceholder":110},[32,186,187],{"class":34,"line":114},[32,188,189],{"class":99},"\u002F* Rotate 90 degrees counter-clockwise *\u002F\n",[32,191,192],{"class":34,"line":120},[32,193,194],{"class":42},"transform: rotate(-90deg);\n",[15,196,197,198,201,202,201,205,208,209,212,213,201,216,201,219,208,222,225],{},"Angles use ",[29,199,200],{},"deg",", ",[29,203,204],{},"rad",[29,206,207],{},"grad",", or ",[29,210,211],{},"turn"," units. A full rotation is ",[29,214,215],{},"360deg",[29,217,218],{},"2π rad",[29,220,221],{},"400grad",[29,223,224],{},"1turn",".",[80,227,229],{"id":228},"scale-resize-it","scale — Resize It",[15,231,232,235],{},[29,233,234],{},"scale()"," changes the size of an element. Values below 1 shrink, above 1 grow, and 1 means no change.",[22,237,239],{"className":24,"code":238,"language":26,"meta":27,"style":27},"\u002F* Scale up 20% *\u002F\ntransform: scale(1.2);\n\n\u002F* Scale X 150%, Y 80% *\u002F\ntransform: scaleX(1.5) scaleY(0.8);\n\n\u002F* Flip horizontally *\u002F\ntransform: scaleX(-1);\n",[29,240,241,246,256,260,265,281,285,290],{"__ignoreMap":27},[32,242,243],{"class":34,"line":35},[32,244,245],{"class":99},"\u002F* Scale up 20% *\u002F\n",[32,247,248,251,254],{"class":34,"line":46},[32,249,250],{"class":42},"transform: scale(1",[32,252,253],{"class":38},".2",[32,255,65],{"class":42},[32,257,258],{"class":34,"line":68},[32,259,111],{"emptyLinePlaceholder":110},[32,261,262],{"class":34,"line":114},[32,263,264],{"class":99},"\u002F* Scale X 150%, Y 80% *\u002F\n",[32,266,267,270,273,276,279],{"class":34,"line":120},[32,268,269],{"class":42},"transform: scaleX(1",[32,271,272],{"class":38},".5",[32,274,275],{"class":42},") scaleY(0",[32,277,278],{"class":38},".8",[32,280,65],{"class":42},[32,282,283],{"class":34,"line":126},[32,284,111],{"emptyLinePlaceholder":110},[32,286,287],{"class":34,"line":131},[32,288,289],{"class":99},"\u002F* Flip horizontally *\u002F\n",[32,291,292],{"class":34,"line":137},[32,293,294],{"class":42},"transform: scaleX(-1);\n",[15,296,297,298,300],{},"A negative ",[29,299,56],{}," value mirrors the element along that axis — handy for flip animations.",[80,302,304],{"id":303},"skew-tilt-it","skew — Tilt It",[15,306,307,310],{},[29,308,309],{},"skew()"," slants an element along the X or Y axis, creating a parallelogram effect.",[22,312,314],{"className":24,"code":313,"language":26,"meta":27,"style":27},"\u002F* Skew 15 degrees on X axis *\u002F\ntransform: skewX(15deg);\n\n\u002F* Skew both axes *\u002F\ntransform: skew(10deg, 5deg);\n",[29,315,316,321,326,330,335],{"__ignoreMap":27},[32,317,318],{"class":34,"line":35},[32,319,320],{"class":99},"\u002F* Skew 15 degrees on X axis *\u002F\n",[32,322,323],{"class":34,"line":46},[32,324,325],{"class":42},"transform: skewX(15deg);\n",[32,327,328],{"class":34,"line":68},[32,329,111],{"emptyLinePlaceholder":110},[32,331,332],{"class":34,"line":114},[32,333,334],{"class":99},"\u002F* Skew both axes *\u002F\n",[32,336,337],{"class":34,"line":120},[32,338,339],{"class":42},"transform: skew(10deg, 5deg);\n",[15,341,342],{},"Skew transforms are uncommon in production UIs but useful for creative effects and decorative elements.",[80,344,346],{"id":345},"matrix-the-universal-function","matrix — The Universal Function",[15,348,349,350,353],{},"Every 2D transform can be expressed as a single ",[29,351,352],{},"matrix()"," call with six parameters:",[22,355,357],{"className":24,"code":356,"language":26,"meta":27,"style":27},"transform: matrix(a, b, c, d, tx, ty);\n",[29,358,359],{"__ignoreMap":27},[32,360,361,364,368,370,373],{"class":34,"line":35},[32,362,363],{"class":42},"transform: matrix(",[32,365,367],{"class":366},"s9eBZ","a",[32,369,201],{"class":42},[32,371,372],{"class":366},"b",[32,374,375],{"class":42},", c, d, tx, ty);\n",[15,377,378,379,381],{},"You rarely write ",[29,380,352],{}," by hand — browsers convert your transforms into it internally. But understanding it helps when reading computed styles in DevTools.",[10,383,385],{"id":384},"order-of-operations-matters","Order of Operations Matters",[15,387,388],{},"Transforms apply in the order you write them — and the result changes depending on that order.",[22,390,392],{"className":24,"code":391,"language":26,"meta":27,"style":27},"\u002F* Rotate first, then translate *\u002F\ntransform: rotate(45deg) translateX(100px);\n\n\u002F* Translate first, then rotate *\u002F\ntransform: translateX(100px) rotate(45deg);\n",[29,393,394,399,404,408,413],{"__ignoreMap":27},[32,395,396],{"class":34,"line":35},[32,397,398],{"class":99},"\u002F* Rotate first, then translate *\u002F\n",[32,400,401],{"class":34,"line":46},[32,402,403],{"class":42},"transform: rotate(45deg) translateX(100px);\n",[32,405,406],{"class":34,"line":68},[32,407,111],{"emptyLinePlaceholder":110},[32,409,410],{"class":34,"line":114},[32,411,412],{"class":99},"\u002F* Translate first, then rotate *\u002F\n",[32,414,415],{"class":34,"line":120},[32,416,417],{"class":42},"transform: translateX(100px) rotate(45deg);\n",[15,419,420,421,425],{},"In the first example, the element rotates in place, then moves 100px along the ",[422,423,424],"em",{},"rotated"," X axis. In the second, it moves 100px along the original X axis, then rotates around its center at the new position.",[15,427,428,432],{},[429,430,431],"strong",{},"Rule of thumb:"," Write transforms from inside out. The last function in the list applies first visually.",[10,434,436],{"id":435},"combining-multiple-transforms","Combining Multiple Transforms",[15,438,439,440,443],{},"You can chain as many functions as needed in a single ",[29,441,442],{},"transform"," declaration:",[22,445,447],{"className":24,"code":446,"language":26,"meta":27,"style":27},".card:hover {\n  transform: translateX(10px) rotate(3deg) scale(1.05);\n}\n",[29,448,449,455,496],{"__ignoreMap":27},[32,450,451,453],{"class":34,"line":35},[32,452,39],{"class":38},[32,454,43],{"class":42},[32,456,457,459,461,464,466,469,473,476,479,481,484,486,488,490,492,494],{"class":34,"line":46},[32,458,50],{"class":49},[32,460,53],{"class":42},[32,462,463],{"class":49},"translateX",[32,465,59],{"class":42},[32,467,468],{"class":49},"10",[32,470,472],{"class":471},"szBVR","px",[32,474,475],{"class":42},") ",[32,477,478],{"class":49},"rotate",[32,480,59],{"class":42},[32,482,483],{"class":49},"3",[32,485,200],{"class":471},[32,487,475],{"class":42},[32,489,56],{"class":49},[32,491,59],{"class":42},[32,493,62],{"class":49},[32,495,65],{"class":42},[32,497,498],{"class":34,"line":68},[32,499,71],{"class":42},[15,501,502,503,505],{},"Avoid setting ",[29,504,442],{}," in multiple rules that might override each other. Always combine your transforms in one declaration.",[10,507,508],{"id":508},"transform-origin",[15,510,511,513,514,517],{},[29,512,508],{}," sets the pivot point for all transform operations. The default value is ",[29,515,516],{},"center center"," (50% 50%), but you can shift it.",[22,519,521],{"className":24,"code":520,"language":26,"meta":27,"style":27},"\u002F* Rotate from top-left corner *\u002F\ntransform-origin: top left;\ntransform: rotate(45deg);\n\n\u002F* Scale from bottom center *\u002F\ntransform-origin: bottom center;\ntransform: scale(1.5);\n",[29,522,523,528,535,539,543,548,555],{"__ignoreMap":27},[32,524,525],{"class":34,"line":35},[32,526,527],{"class":99},"\u002F* Rotate from top-left corner *\u002F\n",[32,529,530,532],{"class":34,"line":46},[32,531,508],{"class":366},[32,533,534],{"class":42},": top left;\n",[32,536,537],{"class":34,"line":68},[32,538,180],{"class":42},[32,540,541],{"class":34,"line":114},[32,542,111],{"emptyLinePlaceholder":110},[32,544,545],{"class":34,"line":120},[32,546,547],{"class":99},"\u002F* Scale from bottom center *\u002F\n",[32,549,550,552],{"class":34,"line":126},[32,551,508],{"class":366},[32,553,554],{"class":42},": bottom center;\n",[32,556,557,559,561],{"class":34,"line":131},[32,558,250],{"class":42},[32,560,272],{"class":38},[32,562,65],{"class":42},[564,565,566,579],"table",{},[567,568,569],"thead",{},[570,571,572,576],"tr",{},[573,574,575],"th",{},"Value",[573,577,578],{},"Effect",[580,581,582,594,604,614,624],"tbody",{},[570,583,584,591],{},[585,586,587,590],"td",{},[29,588,589],{},"center"," (default)",[585,592,593],{},"Pivot from midpoint",[570,595,596,601],{},[585,597,598],{},[29,599,600],{},"top left",[585,602,603],{},"Pivot from top-left corner",[570,605,606,611],{},[585,607,608],{},[29,609,610],{},"bottom right",[585,612,613],{},"Pivot from bottom-right corner",[570,615,616,621],{},[585,617,618],{},[29,619,620],{},"50% 0%",[585,622,623],{},"Pivot from top-center",[570,625,626,631],{},[585,627,628],{},[29,629,630],{},"0px 100px",[585,632,633],{},"Pivot from exact coordinate",[15,635,636,637,639],{},"Changing ",[29,638,508],{}," is critical for realistic animations. A door swings from its hinge — not its center. A card flips from its left edge — not its midpoint.",[10,641,643],{"id":642},"_3d-transforms-brief-overview","3D Transforms (Brief Overview)",[15,645,646,647,201,650,201,653,201,656,201,659,662,663,225],{},"CSS also supports 3D transforms with ",[29,648,649],{},"perspective",[29,651,652],{},"rotateX",[29,654,655],{},"rotateY",[29,657,658],{},"rotateZ",[29,660,661],{},"translateZ",", and ",[29,664,665],{},"scaleZ",[22,667,669],{"className":24,"code":668,"language":26,"meta":27,"style":27},"\u002F* Enable 3D context on parent *\u002F\n.card-container {\n  perspective: 800px;\n}\n\n\u002F* Flip card on hover *\u002F\n.card:hover {\n  transform: rotateY(180deg);\n  transition: transform 0.6s;\n}\n",[29,670,671,676,683,698,702,706,711,717,734,751],{"__ignoreMap":27},[32,672,673],{"class":34,"line":35},[32,674,675],{"class":99},"\u002F* Enable 3D context on parent *\u002F\n",[32,677,678,681],{"class":34,"line":46},[32,679,680],{"class":38},".card-container",[32,682,43],{"class":42},[32,684,685,688,690,693,695],{"class":34,"line":68},[32,686,687],{"class":49},"  perspective",[32,689,53],{"class":42},[32,691,692],{"class":49},"800",[32,694,472],{"class":471},[32,696,697],{"class":42},";\n",[32,699,700],{"class":34,"line":114},[32,701,71],{"class":42},[32,703,704],{"class":34,"line":120},[32,705,111],{"emptyLinePlaceholder":110},[32,707,708],{"class":34,"line":126},[32,709,710],{"class":99},"\u002F* Flip card on hover *\u002F\n",[32,712,713,715],{"class":34,"line":131},[32,714,39],{"class":38},[32,716,43],{"class":42},[32,718,719,721,723,725,727,730,732],{"class":34,"line":137},[32,720,50],{"class":49},[32,722,53],{"class":42},[32,724,655],{"class":49},[32,726,59],{"class":42},[32,728,729],{"class":49},"180",[32,731,200],{"class":471},[32,733,65],{"class":42},[32,735,737,740,743,746,749],{"class":34,"line":736},9,[32,738,739],{"class":49},"  transition",[32,741,742],{"class":42},": transform ",[32,744,745],{"class":49},"0.6",[32,747,748],{"class":471},"s",[32,750,697],{"class":42},[32,752,754],{"class":34,"line":753},10,[32,755,71],{"class":42},[15,757,758,759,761],{},"Setting ",[29,760,649],{}," on the parent creates depth — elements farther from the viewer appear smaller. Without it, 3D transforms project flat onto the screen.",[10,763,765],{"id":764},"browser-support","Browser Support",[15,767,768],{},"CSS 2D transforms enjoy universal support across all modern browsers. 3D transforms are equally well-supported.",[564,770,771,790],{},[567,772,773],{},[570,774,775,778,781,784,787],{},[573,776,777],{},"Feature",[573,779,780],{},"Chrome",[573,782,783],{},"Firefox",[573,785,786],{},"Safari",[573,788,789],{},"Edge",[580,791,792,809,822],{},[570,793,794,797,800,803,806],{},[585,795,796],{},"2D transforms",[585,798,799],{},"36+",[585,801,802],{},"16+",[585,804,805],{},"9+",[585,807,808],{},"12+",[570,810,811,814,816,818,820],{},[585,812,813],{},"3D transforms",[585,815,799],{},[585,817,802],{},[585,819,805],{},[585,821,808],{},[570,823,824,827,830,833,836],{},[585,825,826],{},"Individual transform properties",[585,828,829],{},"104+",[585,831,832],{},"103+",[585,834,835],{},"14.1+",[585,837,829],{},[15,839,840,841,201,843,201,845,847],{},"The newer individual transform properties (",[29,842,146],{},[29,844,478],{},[29,846,56],{}," as standalone CSS properties) simplify code and improve animation performance but lack support in older browsers.",[22,849,851],{"className":24,"code":850,"language":26,"meta":27,"style":27},"\u002F* Individual properties (modern) *\u002F\ntranslate: 20px 10px;\nrotate: 45deg;\nscale: 1.2;\n\n\u002F* Shorthand (universal) *\u002F\ntransform: translate(20px, 10px) rotate(45deg) scale(1.2);\n",[29,852,853,858,863,868,873,877,882],{"__ignoreMap":27},[32,854,855],{"class":34,"line":35},[32,856,857],{"class":99},"\u002F* Individual properties (modern) *\u002F\n",[32,859,860],{"class":34,"line":46},[32,861,862],{"class":42},"translate: 20px 10px;\n",[32,864,865],{"class":34,"line":68},[32,866,867],{"class":42},"rotate: 45deg;\n",[32,869,870],{"class":34,"line":114},[32,871,872],{"class":42},"scale: 1.2;\n",[32,874,875],{"class":34,"line":120},[32,876,111],{"emptyLinePlaceholder":110},[32,878,879],{"class":34,"line":126},[32,880,881],{"class":99},"\u002F* Shorthand (universal) *\u002F\n",[32,883,884,887,889],{"class":34,"line":131},[32,885,886],{"class":42},"transform: translate(20px, 10px) rotate(45deg) scale(1",[32,888,253],{"class":38},[32,890,65],{"class":42},[10,892,894],{"id":893},"key-takeaways","Key Takeaways",[896,897,898,902,917,927,932,938],"ul",{},[899,900,901],"li",{},"CSS transforms change visual rendering without affecting document flow",[899,903,904,906,907,909,910,912,913,916],{},[29,905,146],{}," moves, ",[29,908,478],{}," spins, ",[29,911,56],{}," resizes, ",[29,914,915],{},"skew"," tilts — each has X\u002FY variants",[899,918,919,920,923,924],{},"Transform order matters: ",[29,921,922],{},"rotate then translate"," ≠ ",[29,925,926],{},"translate then rotate",[899,928,929,931],{},[29,930,508],{}," controls the pivot point — default is center, but custom origins create more natural animations",[899,933,934,935,937],{},"3D transforms require ",[29,936,649],{}," on the parent for realistic depth",[899,939,940],{},"Individual transform properties offer cleaner syntax but need fallbacks for older browsers",[10,942,944],{"id":943},"try-it-yourself","Try It Yourself",[15,946,947,948,952],{},"Build and preview CSS transforms interactively with our ",[367,949,951],{"href":950},"\u002Ftools\u002Fcss-transform","CSS Transform Tool",". Adjust rotate, scale, translate, and skew values and copy the generated code straight into your project.",[10,954,956],{"id":955},"related-guides","Related Guides",[896,958,959,966],{},[899,960,961,965],{},[367,962,964],{"href":963},"\u002Fguides\u002Fcss-visual-effects","CSS Visual Effects"," — Combine transforms with filters and blend modes for rich visual treatments",[899,967,968,972],{},[367,969,971],{"href":970},"\u002Fguides\u002Fcss-animation-tools","CSS Animation Tools"," — Turn transforms into smooth animations with transitions and keyframes",[974,975,976],"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 .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 .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}",{"title":27,"searchDepth":46,"depth":46,"links":978},[979,980,987,988,989,990,991,992,993,994],{"id":12,"depth":46,"text":13},{"id":74,"depth":46,"text":75,"children":981},[982,983,984,985,986],{"id":82,"depth":68,"text":83},{"id":158,"depth":68,"text":159},{"id":228,"depth":68,"text":229},{"id":303,"depth":68,"text":304},{"id":345,"depth":68,"text":346},{"id":384,"depth":46,"text":385},{"id":435,"depth":46,"text":436},{"id":508,"depth":46,"text":508},{"id":642,"depth":46,"text":643},{"id":764,"depth":46,"text":765},{"id":893,"depth":46,"text":894},{"id":943,"depth":46,"text":944},{"id":955,"depth":46,"text":956},"2026-05-28","Learn how CSS transforms work — rotate, scale, translate, skew — with practical examples and visual demos.","md",{"immutable":110},"\u002Fguides\u002Fcss-transform-guide",{"title":5,"description":996},"guides\u002Fcss-transform-guide","5U0xgO98XWcfCX5R9J4ajzMCC75veNNPv2O8Xq6C4ss",1780401330480]