Mandala   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /  + + + + + +  + + + + + +  + + + + + +  + + + + + +  + + + + + +  + + + + + +  + + + + + +{ { {} } } }  { { {} } } }  { { {} } } }  { { {} } } }  { { {} } } }  { { {} } } }      ../../    ../../    ../../    ../../    ../../    ../../    ../../ <></><></><></> <> </><></><></> <> </><></><></> <> </><></><></> <> </><></><></> <> </>

The CSS transform Property

This article demonstrates the CSS transform property, its values, and using it with elements. Included are definitions and code examples.

From grid layouts, carousels, and down to colors, CSS defines the aesthetics of your website. It shapes the look and feels, acting as a car chassis’s body kit. In short, it determines your site’s user experience. So, learning this language is essential to exceeding the threshold of mediocrity in the web development field.

Once you dive in and dig deep into the CSS language, you’ll understand its capabilities go beyond just adding layouts, fonts, and colors to web structure. Interestingly, one of such unique properties of CSS is that it includes dynamic transformation properties. Those dynamic properties allow you to change the shapes and the positions of elements on a web page.

The CSS transform property lets you visually manipulate elements by scaling, skewing, rotating, or translating. Though the goal of this article is to shed more light on the transform property. Now let’s share with you what the CSS transform property is all about.

Syntax

transform: none | <transform-list>

The <transform-list> is a list of the accepted <transform-functions>

The default valuenone 
valuenone | <transform-list>
Applies to:transformable elements
Percentages:refers to the size of the reference box
Computed value:as specified, but lengths are absolute
Inherited no
Animatableyes
VersionCSS3
JavaScript syntaxobject.style.transform=”scale(1.5)”

Values

Keyword values

/* Keyword values */
transform: none;

<transform-function> values

/* <transform-function> values */
transform: matrix(6, 5, 4, 3, 2, 1);
transform: matrix3d(0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0);
transform: perspective(25px);
transform: rotate(0.75turn);
transform: rotate3d(3, 2, 1, 5deg);
transform: rotateX(20deg);
transform: rotateY(20deg);
transform: rotateZ(20deg);
transform: translate(24px, 25%);
transform: translate3d(6px, 25%, 6em);
transform: translateX(4em);
transform: translateY(6in);
transform: translateZ(4px);
transform: scale(1, 0.12);
transform: scale3d(1.5, 1.4, 0.7);
transform: scaleX(1);
transform: scaleY(0.75);
transform: scaleZ(0.65);
transform: skew(10deg, 60deg);
transform: skewX(40deg);
transform: skewY(1.85rad);

Multiple function values

/* Multiple function values */
transform: translateX(20px) rotate(20deg) translateY(20px);
transform: perspective(200px) translate(40px, 0, 30px) rotateY(6deg);

Global values

/* Global values */
transform: inherit;
transform: initial;
transform: revert;
transform: revert-layer;
transform: unset;

Value Definitions

ValueDescription
NoneThe none value means there should be no transformation.
matrix(n,n,n,n,n,n)The matrix value is a function that defines a 2D transformation, and it uses a matrix of six values.
matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
The matrix3d value is a function that defines a 3D transformation of an element using a 4×4 matrix of 16 different values.
translate(x,y)The translate value is a function that defines a 2D translation.
translate3d(x,y,z)The translate3d value is a function that defines a 3D translation.
translateX(x)The translateX value is a function that defines an element’s translation, and it uses the value for the X-axis.
translateY(y)The translateY value is a function that defines a translation of an element, and it uses only the value for the Y-axis.
translateZ(z)The translateZ value is a function that defines a 3D translation of an element but only uses the value for the Z-axis.
scale(x,y)The scale value is a function that defines a 2D scale transformation.
scale3d(x,y,z)The scale3d value is a function that defines a 3D scale transformation.
scaleX(x)The scaleX value is a function that defines a scale transformation whose values are for the X-axis.
scaleY(y)The scaleY value is a function that defines a scale transformation whose values are for the Y-axis.
scaleZ(z)The scaleX value is a function that defines a 3D scale transformation by giving a value for the Z-axis.
rotate(angle)The rotate value is a function that defines a 2D rotation. The angle is stated in the parameter.
rotate3d(x,y,z,angle)The rotate3d value is a function that defines a 3D rotation.
rotateX(angle)The rotateX value is a function that defines a 3D rotation along the element’s X-axis.
rotateY(angle)The rotateY value is a function that defines a 3D rotation along the element’s Y-axis.
rotateZ(angle)The rotateX value is a function that defines a 3D rotation along the Y-axis.
skew(x-angle, y-angle)The skew value is a function that defines a 2D skew transformation along the X-axis and Y-axis.
skewX(angle)The skewX value is a function that defines a 2D skew transformation along the X-axis.
skewY(angle)The skewY value is a function that defines a 2D skew transformation along the Y-axis.
perspective(n)The perspective value is a function that defines a perspective view for a 3D transformation.
initialThe initial value sets the property to its default value.
inheritThe inherit value inherits the property from its parent element.

Usage

You can apply the transform property to any element by using CSS selectors. This can also include an image.

#element-id {
  transform: rotateZ(90deg);
}


.element-class {
  transform: perspective(50px);
}

img {
  transform: scale(2, 2, 2);
}

Try It

The CSS transform Property
The CSS transform Property

HTML

<div class="container">
  <div class="micro-container">
    <div class="rotate"></div>
    <div class="scale"></div>
    <div class="skew"></div>
    <div class="translate"></div>
  </div>  
</div>

CSS

html,
body {
  height: 100%;
  margin: 0;
  background: #333;
  font-family: Georgia;
  font-size: 1.2rem;
}

.micro-container {
  width: 500px;
  height: 500px;
}

.rotate,
.scale,
.skew,
.translate {
  height: 200px;
  width: 200px;
  background: #666;
  margin: 25px;
  float: left;
  position: relative;
}

.rotate:before,
.scale:before,
.skew:before,
.translate:before {
  background: orange;
  opacity: 0.75;
  content: "";
  z-index: 1;
}

.rotate:before {
  transform: rotate(352deg);
}

.scale:before {
  transform: scale3d(0.85, 1.15, 1);
  
}

.skew:before {
  transform: skew(10deg);
}

.translate:before {
  transform: translate(8%, 8%);
}

.rotate:after,
.scale:after,
.skew:after,
.translate:after {
  z-index: 3;
  color: #fff;
  line-height: 200px;
  text-align: center;
}

.rotate:after {
  content: "Rotate";
}

.scale:after {
  content: "Scale";
}

.skew:after {
  content: "Skew";
}

.translate:after {
  content: "Translate";
}

.rotate:before,
.rotate:after,
.scale:before,
.scale:after,
.skew:before,
.skew:after,
.translate:before,
.translate:after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.container {
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  -webkit-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  height: 100%;
}

Wrapping Up

This article highlights the functions and values of the transform property. Don’t forget; you can always tweak the codes provided in this article. Let’s see what you come up with at the end.

Specifications

W3C CSS Transforms Module Level 1
#transform-property

W3C CSS Transforms Module Level 1
#transform-functions

Transform Functions

Recommended Articles