Skip to main content
CSS-Tricks
Since 2007
  • Articles
  • Guides
  • Almanac
  • Links
  • Picks
  • Newsletter
  • Search

Articles Tagged
transform

31 Articles
{
,

}
Image
Direct link to the article translateZ()
3d transform

translateZ()

The translateZ() function moves an element closer to or farther from the user.
Image
Gabriel Shoyombo on Jun 25, 2026
Image
Direct link to the article translateY()
transform

translateY()

The translateY() function shifts an element vertically by the specified amount.
Image
Gabriel Shoyombo on Jun 25, 2026
Image
Direct link to the article translateX()
transform

translateX()

The translateX() function shifts an element horizontally by the specified amount.
Image
Gabriel Shoyombo on Jun 25, 2026
Image
Direct link to the article translate()
transform

translate()

The CSS translate() function shifts an element from its default position on a 2-dimensional plane
Image
Gabriel Shoyombo on Jun 25, 2026
Image
Direct link to the article rotateX()
transform

rotateX()

The rotateX() function rotates an element around the x-axis in a three-dimensional space
Image
Gabriel Shoyombo on May 13, 2026
Image
Direct link to the article rotateY()
transform

rotateY()

The rotateY() function rotates an element around its vertical y-axis.
Image
Gabriel Shoyombo on May 13, 2026
Image
Direct link to the article rotateZ()
transform

rotateZ()

The rotateZ() function rotates an element around its z-axis, so clockwise or counterclockwise.
Image
Gabriel Shoyombo on May 13, 2026
Image
Direct link to the article rotate()
transform

rotate()

The rotate() function spins an element either clockwise or counterclockwise in a 2D plane.
Image
Gabriel Shoyombo on May 13, 2026
Image
Direct link to the article Making Zigzag CSS Layouts With a Grid + Transform Trick
grid layout transform

Making Zigzag CSS Layouts With a Grid + Transform Trick

Most grid layouts sit in neat rows, perfectly aligned, like soldiers in formation. But sometimes you want something with more rhythm like, say, a zigzag pattern. Here's how to do it with CSS Grid.
Image
Durgesh Rajubhai Pawar on May 6, 2026
Image
Direct link to the article CSS Infinite 3D Sliders
3d carousel slider transform

CSS Infinite 3D Sliders

In this series, we’ve been making image sliders with nothing but HTML and CSS. The idea is that we can use the same markup but different CSS to get wildly different results, no matter how many images we toss …

Image
Temani Afif on Dec 16, 2022
  • 1
  • 2
  • 3
  • ...
  • 4
  • Older Image

CSS-Tricks is powered by DigitalOcean.

Get Curated Front-End Roundups Right in Your Inbox

Coming back really, really soon! See past issues →

This field is for validation purposes and should be left unchanged.

CSS-Tricks
  • About the site
  • Contact us
  • Write for CSS-Tricks!
  • Advertising
  • RSS Feeds
Social
  • Bluesky
  • Mastodon
  • CodePen
  • X / Twitter
  • LinkedIn
Legalese
  • CSS-Tricks License
  • AI Statement
Back to Top
Advertisement
Advertisement