CSS translate() Function: Shifting Elements on a 2D Plane
By
Geoff Graham
Summary
A technical reference article explaining the CSS translate() function, which shifts an element from its default position on a two-dimensional plane. The article covers the function's syntax, usage within the transform property, and provides examples of horizontal and vertical repositioning using length and percentage values.
Source
CSS-TricksCSS translate() Function: Shifting Elements on a 2D Planecss-tricks.comKey quotes
· 3 pulledThe CSS translate() function shifts an element from its default position on a two-dimensional plane.
Along with other transform functions, it is used inside the transform property.
The translate() function is defined in the CSS Transforms Module Level 1 draft.
You might also wanna read
Exploring Practical Uses for CSS Trigonometric Functions: sin() and cos()
This article examines CSS trigonometric functions (sin() and cos()) that were voted as the "Most Hated Feature" in the State of CSS 2025 sur
css-tricks.com·9mo ago
CSS sibling-index() and sibling-count(): A New Approach to Staggered Animations Without JavaScript
This article introduces two new CSS functions — sibling-index() and sibling-count() — that allow developers to create staggered cascade anim
Smashing Magazine·1mo agoExploring CSS as a Query Language and General-Purpose Programming Tool
An exploration of using CSS as a query language and general-purpose programming language beyond its traditional role of styling web pages. T
Implementing Spring and Bounce Animations with CSS's New Linear() Timing Function
The article explores the new CSS `linear()` timing function that enables physics-based animations like springs and bounces directly in nativ
joshwcomeau.com·8mo ago
The Evolution of CSS: From Presentational Styling to a Smarter, Logic-Driven Language
Gabriel Shoyombo explores the evolution of CSS from a purely presentational language into one with growing logical capabilities, examining f
Smashing Magazine·1y ago
CSS Technique for True Shrinkwrapping Using Anchor Positioning and Scroll-Driven Animations
The article presents an innovative CSS technique for achieving true shrinkwrapping of elements with auto-wrapped content, which was previous
Comments
Sign in to join the conversation.
No comments yet. Be the first.