CSS PortalCSS Portal
Menu
  • CSS Generators
  • CSS Resources
  • CSS Tools
  • HTML Resources
  • Blog
  1. Home
  2. CSS Properties
  3. Transform

CSS transform Property

Description

The transform property allow elements styled with CSS to be transformed in two-dimensional or three-dimensional space. Using this property, elements can be translated, rotated, scaled, and skewed. The value list may consist of 2D and/or 3D transform values.

Initial value
none
Applies to
Transformable elements
Inherited
No
Media
Visual
Computed value
As specified
Animatable
Yes
CSS Version
CSS3
JavaScript syntax
object.style.transform

Syntax

transform: none | <transform-list>

Values

  • matrix(a, b, c, d, e, f)Specifies a 2D transformation matrix in the form of a transformation matrix of the six values, a-f.
  • matrix3d(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p)Specifies a 3D transformation as a 4x4 homogeneous matrix of 16 values in column-major order.
  • rotate(angle)Specifies a 2D rotation by the specified angle about the origin of the element, as defined by the transform-origin property.
  • rotate3d(x, y, z, a)Specifies a 3D rotation by the angle specified in last parameter about the [x,y,z] direction vector described by the first three parameters.
  • rotateX(ax)Specifies a 3D rotation by the angle specified in the X direction. Equivalent to rotate3d(1, 0, 0, ax).
  • rotateY(ay)Specifies a 3D rotation by the angle specified in the Y direction. Equivalent to rotate3d(0, 1, 0, ay).
  • rotateZ(az)Specifies a 3D rotation by the angle specified in the Z direction. Equivalent to rotate3d(0, 0, 1, az).
  • scale(sx[, sy])Specifies a 2D scaling operation described by [sx, sy]. If sy is not specified, it is assumed to be equal to sx.
  • scale3d(sx, sy, sz)Specifies a 3D scale operation by the [sx,sy,sz] scaling vector described by the three parameters.
  • scaleX(sx)Specifies a scale operation using the vector [sx, 1].
  • scaleY(sy)Specifies a scale operation using the vector [1, sy].
  • scaleZ(sz)Specifies a 3D scale operation by the scaling vector [1,1,sz].
  • skew(ax[, ay])Specifies a 2D skew by [ax,ay] for X and Y. If the second parameter is not provided, it is assumed to be zero.
  • skewX(angle)Specifies a 2D skew transformation along the X axis by the given angle.
  • skewY(angle)Specifies a 2D skew transformation along the Y axis by the given angle.
  • translate(tx[, ty])Specifies a 2D translation by the vector [tx, ty]. If ty is not specified, its value is assumed to be zero.
  • translate3d(tx, ty, tz)Specifies a 3D translation by the vector [tx,ty,tz] in the X, Y, and Z directions.
  • translateX(tx)Translates the element by the given amount along the X axis.
  • translateY(ty)Translates the element by the given amount along the Y axis.
  • translateZ(tz)Specifies a 3D translation by the vector [0,0,tz] in the Z direction.
  • perspective(<length>)Specifies a perspective projection matrix, which scales points in the X and Y directions based on their Z value. Thus, points with positive Z values are scaled away from the origin, and those with negative Z values are scaled toward the origin.
  • noneSpecifies that no transform should be applied.

Example

<h2>2D CSS Conversions</h2> 
<div class="static"><div class="test"> translate (-20px, -20px) </div></div>
<div class="static"><div class="test2"> scaleX (.5) </div></div>
<div class="static"><div class="test3"> scale (0, 0.5) </div></div>
<br>
<div class="static"><div class="test4"> rotate (2turn) </div></div>
<div class="static"><div class="test5"> skewY (20deg) </div></div>
<div class="static"><div class="test6"> matrix (.7,0, .5, .7, -99, -99) </div></div>
.static {
   margin: 10px;
   background: gray;
   display: inline-block; 
} 
div {
   width: 180px;
   height : 100px;
   text-align: center; 
   line-height: 100px;
   transition: .3s linear; 
   -moz-transition: .3s linear;
   -webkit-transition: .3s linear; 
} 
.test2, .test4, .test6 { 
   background: orange;  
}
.test, .test3, .test5 { 
   background: plum;  
} 
.test:hover {
   transform: translate(-20px, -20px);
   -webkit-transform: translate(-20px, -20px); 
   -moz-transform: translate(-20px, -20px); 
   -ms-transform: translate(-20px, -20px);
}  
.test2:hover {
   transform: scaleX(.5);
   -webkit-transform: scaleX(.5);
   -moz-transform: scaleX(.5);
   -ms-transform: scaleX(.5); 
} 
.test3:hover {
   transform: scale(0, 0.5); 
   -webkit-transform: scale(0, 0.5);
   -moz-transform: scale(0, 0.5);
   -ms-transform: scale(0, 0.5); 
}  
.test4:hover {
   transform: rotate(2turn); 
   -webkit-transform: rotate(2turn); 
   -moz-transform: rotate(2turn); 
   -ms-transform: rotate(2turn);
}  
.test5:hover {
   transform: skewY(20deg);
   -webkit-transform: skewY(20deg);
   -moz-transform: skewY(20deg); 
   -ms-transform: skewY(20deg);
}  
.test6:hover {
   transform: matrix(.7,0, .5, .7, -99, -99); 
   -webkit-transform: matrix(.7,0, .5, .7, -99, -99); 
   -moz-transform: matrix(.7,0, .5, .7, -99, -99); 
   -ms-transform: matrix(.7,0, .5, .7, -99, -99); 
}   

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
10123616239
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
4.436162493.0

Last updated by CSSPortal on: 2nd November 2019


Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL
Sidebar

CSS & HTML References

  • CSS At-Rules
    • @charset
    • @document
    • @font-face
    • @import
    • @keyframes
    • @media
    • @namespace
    • @page
    • @supports
    • @viewport
  • CSS Data Types
    • angle
    • basic-shape
    • blend-mode
    • color
    • frequency
    • gradient
    • image
    • integer
    • length
    • number
    • percentage
    • position
    • ratio
    • resolution
    • string
    • time
    • url
  • CSS Functions
    • attr
    • blur
    • brightness
    • calc
    • circle
    • contrast
    • drop-shadow
    • ellipse
    • grayscale
    • hsl
    • hsla
    • hue-rotate
    • inset
    • invert
    • linear-gradient
    • matrix
    • matrix3d
    • opacity
    • perspective
    • polygon
    • radial-gradient
    • repeating-linear-gradient
    • repeating-radial-gradient
    • rgb
    • rgba
    • rotate
    • rotate3d
    • rotateX
    • rotateY
    • rotateZ
    • saturate
    • scale
    • scale3d
    • scaleX
    • scaleY
    • scaleZ
    • sepia
    • skew
    • skewX
    • skewY
    • translate
    • translate3d
    • translateX
    • translateY
    • translateZ
  • CSS Properties
    • align-content
    • align-items
    • align-self
    • all
    • animation
    • animation-delay
    • animation-direction
    • animation-duration
    • animation-fill-mode
    • animation-iteration-count
    • animation-name
    • animation-play-state
    • animation-timing-function
    • backface-visibility
    • background
    • background-attachment
    • background-blend-mode
    • background-clip
    • background-color
    • background-image
    • background-origin
    • background-position
    • background-repeat
    • background-size
    • border
    • border-bottom
    • border-bottom-color
    • border-bottom-left-radius
    • border-bottom-right-radius
    • border-bottom-style
    • border-bottom-width
    • border-collapse
    • border-color
    • border-image
    • border-image-outset
    • border-image-repeat
    • border-image-slice
    • border-image-source
    • border-image-width
    • border-left
    • border-left-color
    • border-left-style
    • border-left-width
    • border-radius
    • border-right
    • border-right-color
    • border-right-style
    • border-right-width
    • border-spacing
    • border-style
    • border-top
    • border-top-color
    • border-top-left-radius
    • border-top-right-radius
    • border-top-style
    • border-top-width
    • border-width
    • bottom
    • box-decoration-break
    • box-shadow
    • box-sizing
    • break-after
    • break-before
    • break-inside
    • caption-side
    • caret-color
    • clear
    • clip-path
    • color
    • column-count
    • column-fill
    • column-rule
    • column-rule-color
    • column-rule-style
    • column-rule-width
    • column-span
    • column-width
    • columns
    • content
    • counter-increment
    • counter-reset
    • counter-set
    • cursor
    • direction
    • display
    • empty-cells
    • filter
    • flex
    • flex-basis
    • flex-direction
    • flex-flow
    • flex-grow
    • flex-shrink
    • flex-wrap
    • float
    • font
    • font-family
    • font-feature-settings
    • font-kerning
    • font-language-override
    • font-size
    • font-size-adjust
    • font-stretch
    • font-style
    • font-synthesis
    • font-variant
    • font-variant-alternates
    • font-variant-caps
    • font-variant-east-asian
    • font-variant-ligatures
    • font-variant-numeric
    • font-variant-position
    • font-weight
    • grid
    • grid-area
    • grid-auto-columns
    • grid-auto-flow
    • grid-auto-rows
    • grid-column
    • grid-column-end
    • grid-column-gap
    • grid-column-start
    • grid-gap
    • grid-row
    • grid-row-end
    • grid-row-gap
    • grid-row-start
    • grid-template
    • grid-template-areas
    • grid-template-columns
    • grid-template-rows
    • hanging-punctuation
    • height
    • hyphens
    • image-orientation
    • justify-content
    • justify-items
    • justify-self
    • left
    • letter-spacing
    • line-break
    • line-height
    • list-style
    • list-style-image
    • list-style-position
    • list-style-type
    • margin
    • margin-bottom
    • margin-left
    • margin-right
    • margin-top
    • max-height
    • max-width
    • min-height
    • min-width
    • mix-blend-mode
    • object-fit
    • object-position
    • opacity
    • order
    • orphans
    • outline
    • outline-color
    • outline-offset
    • outline-style
    • outline-width
    • overflow
    • overflow-wrap
    • overflow-x
    • overflow-y
    • padding
    • padding-bottom
    • padding-left
    • padding-right
    • padding-top
    • perspective
    • perspective-origin
    • place-content
    • place-items
    • place-self
    • position
    • quotes
    • resize
    • right
    • shape-image-threshold
    • shape-margin
    • shape-outside
    • tab-size
    • table-layout
    • text-align
    • text-align-last
    • text-combine-upright
    • text-decoration
    • text-decoration-color
    • text-decoration-line
    • text-decoration-style
    • text-emphasis
    • text-emphasis-color
    • text-emphasis-position
    • text-emphasis-style
    • text-indent
    • text-justify
    • text-orientation
    • text-overflow
    • text-shadow
    • text-transform
    • text-underline-position
    • top
    • transform
    • transform-origin
    • transform-style
    • transition
    • transition-delay
    • transition-duration
    • transition-property
    • transition-timing-function
    • unicode-bidi
    • vertical-align
    • visibility
    • white-space
    • widows
    • width
    • word-break
    • word-spacing
    • word-wrap
    • writing-mode
    • z-index
  • CSS Pseudo Classes
    • :active
    • :checked
    • :default
    • :disabled
    • :empty
    • :enabled
    • :first-child
    • :first-of-type
    • :focus
    • :fullscreen
    • :hover
    • :in-range
    • :indeterminate
    • :invalid
    • :lang
    • :last-child
    • :last-of-type
    • :link
    • :not
    • :nth-child
    • :nth-last-child
    • :nth-last-of-type
    • :nth-of-type
    • :only-child
    • :only-of-type
    • :optional
    • :out-of-range
    • :read-only
    • :read-write
    • :required
    • :root
    • :target
    • :valid
    • :visited
  • CSS Pseudo Elements
    • ::after
    • ::before
    • ::first-letter
    • ::first-line
    • ::placeholder
    • ::selection
  • HTML Tags
    • a
    • abbr
    • address
    • area
    • article
    • aside
    • audio
    • b
    • base
    • bdi
    • bdo
    • blockquote
    • body
    • br
    • button
    • canvas
    • caption
    • cite
    • code
    • col
    • colgroup
    • comment
    • datalist
    • dd
    • del
    • details
    • dfn
    • dialog
    • div
    • dl
    • doctype
    • dt
    • em
    • embed
    • fieldset
    • figcaption
    • figure
    • footer
    • form
    • h1
    • h2
    • h3
    • h4
    • h5
    • h6
    • head
    • header
    • hr
    • html
    • i
    • iframe
    • img
    • input
    • ins
    • kbd
    • keygen
    • label
    • legend
    • li
    • link
    • map
    • mark
    • menu
    • meta
    • meter
    • nav
    • noscript
    • object
    • ol
    • optgroup
    • option
    • output
    • p
    • param
    • picture
    • pre
    • progress
    • q
    • rp
    • rt
    • ruby
    • s
    • samp
    • script
    • section
    • select
    • small
    • source
    • span
    • strong
    • style
    • sub
    • summary
    • sup
    • table
    • tbody
    • td
    • textarea
    • tfoot
    • th
    • thead
    • time
    • title
    • tr
    • track
    • u
    • ul
    • var
    • video
    • wbr
  • Sponsors
  • Learn Wordpress
    Wordpress hosting. Theme and plugin reviews. Wordpress development tips.
    Templatic
    Wordpress Themes, Cloud Hosting, Backups and Webmaster Tips.
    A2 Web Hosting
    Shared hosting, Reseller hosting, Cloud hosting, Dedicated hosting.
    Online Password Manager
    Access your passwords from any computer, no need to remember all of your passwords.
    Advertise Here
    Advertise your company and products here!

    About CSSPortal

    CSS Portal is home to many examples of CSS and how it can be used in website design. Here you'll find all CSS properties and many CSS generators to help with all your design needs.

    Friends

    • Expand URL
    • Password Manager
    • Website Tools & Generators

    CSSPortal

    • Donate to CSSPortal
    • Privacy Policy
    • Contact Us
    • CSS Blog

    Copyright © 2022, CSSPortal.com All rights reserved.