- CSS Basics
- CSS Tutorial
- CSS Where to Write
- CSS Syntax
- CSS Selectors
- CSS Combinators
- CSS Attribute Selectors
- CSS Pseudo Classes
- CSS Pseudo-Classes
- CSS :link :hover :active
- CSS :first-child
- CSS :first-of-type
- CSS :last-child
- CSS :last-of-type
- CSS :only-child
- CSS :only-of-type
- CSS :nth-child()
- CSS :nth-of-type()
- CSS :nth-last-child()
- CSS :nth-last-of-type()
- CSS :focus
- CSS :not()
- CSS :root
- CSS :empty
- CSS :target
- CSS :lang()
- CSS :valid
- CSS :invalid
- CSS :optional
- CSS :required
- CSS :in-range
- CSS :out-of-range
- CSS :enabled :disabled
- CSS :read-only
- CSS :read-write
- CSS Pseudo Elements
- CSS Pseudo-Elements
- CSS ::before
- CSS ::after
- CSS ::first-letter
- CSS ::first-line
- CSS ::marker
- CSS ::selection
- CSS Colors
- CSS Colors
- CSS rgb() and rgba()
- CSS hsl() and hsla()
- CSS Background
- CSS background
- CSS background-color
- CSS background-image
- CSS linear-gradient()
- CSS radial-gradient()
- CSS conic-gradient()
- CSS repeating-linear-gradient()
- CSS repeating-radial-gradient()
- CSS repeating-conic-gradient()
- CSS background-position
- CSS background-size
- CSS background-repeat
- CSS background-origin
- CSS background-clip
- CSS background-attachment
- CSS background-blend-mode
- CSS Border
- CSS border
- CSS border-style
- CSS border-style Values
- CSS border-width
- CSS border-color
- CSS border-top
- CSS border-top-style
- CSS border-top-width
- CSS border-top-color
- CSS border-bottom
- CSS border-bottom-style
- CSS border-bottom-width
- CSS border-bottom-color
- CSS border-left
- CSS border-left-style
- CSS border-left-width
- CSS border-left-color
- CSS border-right
- CSS border-right-style
- CSS border-right-width
- CSS border-right-color
- CSS border-top-left-radius
- CSS border-top-right-radius
- CSS border-bottom-left-radius
- CSS border-bottom-right-radius
- CSS border-radius
- CSS border-collapse
- CSS empty-cells
- CSS border-spacing
- CSS border-image
- CSS border-image-source
- CSS border-image-slice
- CSS border-image-width
- CSS border-image-outset
- CSS border-image-repeat
- CSS Fonts
- CSS font
- CSS font-style
- CSS font-variant
- CSS font-variant-caps
- CSS font-weight
- CSS font-size
- CSS line-height
- CSS font-family
- CSS font-stretch
- CSS font-kerning
- CSS font-face
- CSS font-feature-settings
- CSS Text
- CSS Text
- CSS color
- CSS text-decoration
- CSS text-decoration-line
- CSS text-decoration-color
- CSS text-decoration-style
- CSS text-underline-position
- CSS text-align
- CSS text-align-last
- CSS text-justify
- CSS letter-spacing
- CSS word-spacing
- CSS text-shadow
- CSS text-transform
- CSS white-space
- CSS text-indent
- CSS word-wrap
- CSS overflow-wrap
- CSS word-break
- CSS text-overflow
- CSS hyphens
- CSS direction
- CSS unicode-bidi
- CSS writing-mode
- CSS Padding & Margin
- CSS Box Model
- CSS padding
- CSS padding-top
- CSS padding-right
- CSS padding-bottom
- CSS padding-left
- CSS margin
- CSS margin-top
- CSS margin-right
- CSS margin-bottom
- CSS margin-left
- CSS Padding Vs Margin
- CSS Dimensions
- CSS Dimensions
- CSS height
- CSS max-height
- CSS min-height
- CSS width
- CSS max-width
- CSS min-width
- CSS overflow
- CSS overflow-x
- CSS overflow-y
- CSS Multi-Column Layout
- CSS Multi-Column Layout
- CSS columns
- CSS column-width
- CSS column-count
- CSS column-rule
- CSS column-rule-width
- CSS column-rule-style
- CSS column-rule-color
- CSS column-span
- CSS column-fill
- CSS Display
- CSS display
- CSS inline Vs block
- CSS inline Vs inline-block
- CSS flex Vs inline-flex
- CSS inline-flex Vs inline-block
- CSS flex Vs grid
- CSS grid Vs inline-grid
- CSS Float and Position
- CSS float
- CSS clear
- CSS Align
- CSS position
- CSS left
- CSS right
- CSS top
- CSS bottom
- CSS Style List Marker
- CSS Style List Marker
- CSS list-style
- CSS list-style-type
- CSS list-style-position
- CSS list-style-image
- CSS Outline
- CSS outline
- CSS outline-width
- CSS outline-style
- CSS outline-color
- CSS outline-offset
- CSS Effects
- CSS Effects
- CSS Gradients
- CSS Shadows
- CSS box-shadow
- CSS opacity
- CSS Transforms
- CSS transform
- CSS translateX()
- CSS translateY()
- CSS translateZ()
- CSS translate()
- CSS translate3d()
- CSS scaleX()
- CSS scaleY()
- CSS scaleZ()
- CSS scale()
- CSS scale3d()
- CSS rotateX()
- CSS rotateY()
- CSS rotateZ()
- CSS rotate()
- CSS rotate3d()
- CSS skewX()
- CSS skewY()
- CSS skew()
- CSS matrix()
- CSS matrix3d()
- CSS perspective() Function
- CSS perspective Property
- CSS perspective-origin
- CSS transform-style
- CSS transform-origin
- CSS 2D Transform
- CSS 3D Transform
- CSS Transition
- CSS transition
- CSS transition-property
- CSS transition-duration
- CSS transition-timing-function
- CSS transition-delay
- CSS Animation
- CSS animation
- CSS @keyframes
- CSS animation-name
- CSS animation-duration
- CSS animation-timing-function
- CSS animation-delay
- CSS animation-iteration-count
- CSS animation-direction
- CSS animation-fill-mode
- CSS animation-play-state
- CSS Grid Layout
- CSS Grid Layout
- CSS gap
- CSS column-gap
- CSS row-gap
- CSS grid-area
- CSS grid-column-start
- CSS grid-column-end
- CSS grid-row-start
- CSS grid-row-end
- CSS grid-template
- CSS grid-template-columns
- CSS grid-template-rows
- CSS grid-template-areas
- CSS grid-auto-columns
- CSS grid-auto-rows
- CSS grid-auto-flow
- CSS grid-column
- CSS grid-row
- CSS Template Layout
- CSS Flex Layout
- CSS FlexBox
- CSS flex-direction
- CSS flex-wrap
- CSS flex-flow
- CSS justify-content
- CSS align-content
- CSS align-items
- CSS flex-grow
- CSS flex-shrink
- CSS flex-basis
- CSS flex
- CSS align-self
- CSS order
- CSS Misc
- CSS Length Units
- CSS Style Link
- CSS Navigation Bar
- CSS Style Image
- CSS Style Tables
- CSS table-layout
- CSS caption-side
- CSS Create Frames
CSS transform-origin
The CSS transform-origin property is used to set origin of the transformed element. For example:
<!DOCTYPE html> <html> <head> <style> .myd{border: 3px dotted coral; margin-bottom: 12px;} .a, .b, .c, .d{width: 200px; height: 100px; background-color: gainsboro; transform: skewX(25deg);} .b{transform-origin: top left;} .c{transform-origin: 0px -120px;} .d{transform-origin: 0% -20%;} </style> </head> <body> <h2>Without transform-origin</h2> <div class="myd"> <div class="a"></div> </div> <h2>transform-origin: top left</h2> <div class="myd"> <div class="b"></div> </div> <h2>transform-origin: 0px -120px</h2> <div class="myd"> <div class="c"></div> </div> <h2>transform-origin: 30% -20%</h2> <div class="myd"> <div class="d"></div> </div> </body> </html>
Without transform-origin
transform-origin: top left
transform-origin: 0px -120px
transform-origin: 30% -20%
Note - The transform-origin property comes with the transform property.
Note - The skewX() function skews an element horizontally.
CSS transform-origin Syntax
The syntax of transform-origin property in CSS, is:
transform-origin: x-axis y-axis z-axis;
The x-axis parameter is used to define the origin of a transformed element on x-axis. And the value should be any of the following:
- left
- right
- center
- length
Note - The left, right, and center are keywords, whereas length are used to define custom position like 20px, 34% etc.
Similarly the y-axis parameter is used to define the origin of a transformed element on y-axis. And the value should be any of the following:
- top
- bottom
- center
- length
Again in similar way, the z-axis parameter is used to define the custom origin of a transformed element on of course z-axis. And the value that can be used is custom length like 12px, 20%, 1.2em etc.
Note - The initial and inherit keywords can also be used to define the transform-origin property. The initial is used to use the default value, whereas the inherit is used to use the value inherited by the parent element.
Now the question is, what if user provides one or two values to transform-origin property ?
The answer is: it depends on values, if user uses keywords. And if user uses lengths like 20px, 34%,
2.3em etc., then in that case, the first value goes to x-axis, second value goes to y-axis, and the third
value goes to z-axis.
For example:
transform-origin: top left;
The top assigns to y-axis, and left assigns to x-axis. Another example is:
transform-origin: right top;
The right assigns to x-axis, and top assigns to y-axis. And if we use custom length like pixels or percentage, for example:
transform-origin: 12px;
The value assigns to x-axis. Here is another example:
transform-origin: 2cm 120px;
2cm assigns to x-axis, whereas 120px assigns to y-axis. One more example is:
transform-origin: 12px 40% 46px;
12px assigns to x-axis, 40% assigns to y-axis, and 46px assigns to z-axis.
CSS transform-origin Example
<!DOCTYPE html> <html> <head> <style> .backBox{width: 120px; height: 120px; background-color: gainsboro; margin: auto;} .frontBox{width: 120px; height: 120px; background-color: chocolate;} .a{transform: rotate(15deg);} .b{transform: rotate(15deg); transform-origin: 100px 0px;} .c{transform: rotate(15deg); transform-origin: -100px 0px;} .d{transform: rotate(15deg); transform-origin: 0px 100px;} .e{transform: rotate(15deg); transform-origin: 0px -100px;} .f{transform: rotate(15deg); transform-origin: 0 0;} .g{transform: rotate(15deg); transform-origin: 100% 100%;} .h{transform: rotate(15deg); transform-origin: 100% 100% 100%;} .i{transform: scale(1.4, 0.7); transform-origin: 0 0;} .j{transform: scale(1.4, 0.7); transform-origin: 0% bottom;} .k{transform: scale(1.4, 0.7); transform-origin: 100% bottom;} .l{transform: scale(1.4, 0.7); transform-origin: 0% top;} .m{transform: skewX(45deg); transform-origin: 70% 20%;} .n{transform: skewX(45deg); transform-origin: 70% 20% 90%;} .o{transform: skewY(45deg); transform-origin: 70% 20%;} .p{transform: skewY(45deg); transform-origin: 70%;} </style> </head> <body> <h2>transform: rotate(15deg)</h2> <div class="backBox"> <div class="frontBox a"></div> </div> <h2>transform: rotate(15deg); transform-origin: 100px 0px</h2> <div class="backBox"> <div class="frontBox b"></div> </div> <h2>transform: rotate(15deg); transform-origin: -100px 0px</h2> <div class="backBox"> <div class="frontBox c"></div> </div> <h2>transform: rotate(15deg); transform-origin: 0px 100px</h2> <div class="backBox"> <div class="frontBox d"></div> </div> <h2>transform: rotate(15deg); transform-origin: 0px -100px</h2> <div class="backBox"> <div class="frontBox e"></div> </div> <h2>transform: rotate(15deg); transform-origin: 0 0</h2> <div class="backBox"> <div class="frontBox f"></div> </div> <h2>transform: rotate(15deg); transform-origin: 100% 100%</h2> <div class="backBox"> <div class="frontBox g"></div> </div> <h2>transform: rotate(15deg); transform-origin: 100% 100% 100%</h2> <div class="backBox"> <div class="frontBox h"></div> </div> <h2>transform: scale(1.4, 0.7); transform-origin: 0 0</h2> <div class="backBox"> <div class="frontBox i"></div> </div> <h2>transform: scale(1.4, 0.7); transform-origin: 0% bottom</h2> <div class="backBox"> <div class="frontBox j"></div> </div> <h2>transform: scale(1.4, 0.7); transform-origin: 100% bottom</h2> <div class="backBox"> <div class="frontBox k"></div> </div> <h2>transform: scale(1.4, 0.7); transform-origin: 0% top</h2> <div class="backBox"> <div class="frontBox l"></div> </div> <h2>transform: skewX(45deg); transform-origin: 70% 20%</h2> <div class="backBox"> <div class="frontBox m"></div> </div> <h2>transform: skewX(45deg); transform-origin: 70% 20% 90%</h2> <div class="backBox"> <div class="frontBox n"></div> </div> <h2>transform: skewY(45deg); transform-origin: 70% 20%</h2> <div class="backBox"> <div class="frontBox o"></div> </div> <h2>transform: skewY(45deg); transform-origin: 70%</h2> <div class="backBox"> <div class="frontBox p"></div> </div> </body> </html>
transform: rotate(15deg)
transform: rotate(15deg); transform-origin: 100px 0px
transform: rotate(15deg); transform-origin: -100px 0px
transform: rotate(15deg); transform-origin: 0px 100px
transform: rotate(15deg); transform-origin: 0px -100px
transform: rotate(15deg); transform-origin: 0 0
transform: rotate(15deg); transform-origin: 100% 100%
transform: rotate(15deg); transform-origin: 100% 100% 100%
transform: scale(1.4, 0.7); transform-origin: 0 0
transform: scale(1.4, 0.7); transform-origin: 0% bottom
transform: scale(1.4, 0.7); transform-origin: 100% bottom
transform: scale(1.4, 0.7); transform-origin: 0% top
transform: skewX(45deg); transform-origin: 70% 20%
transform: skewX(45deg); transform-origin: 70% 20% 90%
transform: skewY(45deg); transform-origin: 70% 20%
transform: skewY(45deg); transform-origin: 70%
In above example, the back box, or the box whose background color is gainsboro, is fix. Whereas the transformation is applied to the front box, whose background color is chocolate. I've done this, so that the change in the origin of transformation can easily be spotted.
Note - The rotate() function rotates an element on the plane.
Note - The scale() function resizes an element on x-axis and y-axis both at once.
Note - The skewY() function skews an element vertically.
« Previous Tutorial Next Tutorial »