CSS translateY(): Shifting Elements Vertically with the Transform Function
By
Gabriel Shoyombo
Summary
A technical reference article explaining the CSS translateY() function, which shifts elements vertically. It covers syntax, usage within the transform property, positive/negative value behavior, percentage vs length units, and practical examples. The article is a straightforward documentation piece from CSS-Tricks.
Source
CSS-TricksCSS translateY(): Shifting Elements Vertically with the Transform Functioncss-tricks.comKey quotes
· 3 pulledThe CSS translateY() function shifts an element vertically by the specified amount.
Specifically, it shifts an element either up or down, depending on whether the value is positive or negative.
Along with other transform functions, it is used inside the transform property.
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 ago
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 agoShow HN: CSS generator for a high-def glass effect
Building 3D Environments with HTML and CSS Transforms: Advanced Techniques for Lighting, Shadows and Collision Detection
A developer documents their experimental project creating a 3D environment using HTML elements and CSS transforms, featuring advanced techni
keithclark.co.uk·10mo ago
ScreenTranslate: macOS Utility for Instant On-Screen Text Translation
ScreenTranslate is a macOS utility that enables instant translation of on-screen text through a simple drag-and-select interface. It address
Product Hunt·4mo ago
Comments
Sign in to join the conversation.
No comments yet. Be the first.