CSS translateX(): How to Horizontally Shift Elements
By
Gabriel Shoyombo
Summary
A technical reference article explaining the CSS translateX() transform function, which shifts an element horizontally by a specified amount. The article covers the syntax, usage within the transform property, and provides examples of how to use translateX() with positive and negative values to move elements right or left.
Source
CSS-TricksCSS translateX(): How to Horizontally Shift Elementscss-tricks.comKey quotes
· 3 pulledThe CSS translateX() function shifts an element horizontally by the specified amount.
Along with other transform functions, it is used inside the transform property.
It displaces an element to the right or the left, depending on whether the value is positive or negative.
You might also wanna read
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 agoShow HN: CSS generator for a high-def glass effect
Tutorial: Creating a Moving-Highlight Navigation Bar with JavaScript and CSS
The article provides a tutorial by Blake Lundquist on creating a 'moving-highlight' navigation bar using JavaScript and CSS. It covers two m
Smashing Magazine·1y ago
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
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 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
Comments
Sign in to join the conversation.
No comments yet. Be the first.