transform - HTML CSS CSS Property

HTML CSS examples for CSS Property:transform

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. transform

Description

The transform CSS property sets a transformation to an element such as translate, rotate, scale etc.

The following table summarizes the transform Property.

Item Value
Default value: none
Applies to:Transformable elements
Inherited: No
Animatable: Yes.

Syntax

The syntax of the property is as follows: 


transform:     [ transform-function ] 1 or more values | none | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
translate(tx,ty) Moves the element by the given amount along the X and Y-axis.
translate3d(tx,ty,tz)Moves the element by the given amount along the X, Y?&?Z-axis.
translateX(tx) Moves the element by the given amount along the X-axis.
translateY(ty) Moves the element by the given amount along the Y-axis.
translateZ(tz) Moves the element by the given amount along the Z-axis.
rotate(a)Rotates the element by the angle around the origin defined by the transform-origin property.
rotate3d(x,y,z,?a) Rotates the element in 3D space by the angle in the last parameter, around the [x,y,z] direction vector.
rotateX(a) Rotates the element by the given angle around the X-axis.
rotateY(a) Rotates the element by the given angle around the Y-axis.
rotateZ(a) Rotates the element by the given angle around the Z-axis.
scale(sx,sy) Scale the width and height up or down by the given amount.
scale3d(sx,sy,sz)Scales the element by the given amount along the X, Y and Z-axis.
scaleX(sx) Scales the element along the X-axis.
scaleY(sy) Scales the element along the Y-axis.
scaleZ(sz) Scales the element along the Z-axis.
skew(ax,ay) Skews the element by the given angle along the X and Y-axis.
skewX(ax)Skews the element by the given angle along the X-axis.
skewY(ay)Skews the element by the given angle along the Y-axis.
matrix(n,n,n,n,n,n) Set a 2D transformation in the form of a transformation matrix comprised of the six values.
matrix(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) Set a 3D transformation in the form of a 4?4 transformation matrix of 16 values.
perspective(length) Defines a perspective view for a 3D transformed element.
none Set that no transform should be applied.
initial Sets this property to its default value.
inherit take the value of its parent element transform property.

The example below shows the transform property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 transform Property</title>
  <style type="text/css">
  img {<!--from  w  w  w  .j  av a2 s .co m-->
    -webkit-transform: translate(200px, 50px);  /* Chrome, Safari, Opera */
       -moz-transform: translate(200px, 50px);  /* Firefox */
      -ms-transform: translate(200px, 50px);  /* IE 9 */
        transform: translate(200px, 50px);  /* Standard syntax */
  }
  .box{
        margin: 50px;
        width:153px;
        height:103px;
        background: url("https://www.java2s.com/style/demo/Opera.png") no-repeat;
    }
</style>
 </head>
 <body>
  <div class="box">
   <img src="https://www.java2s.com/style/demo/Opera.png" alt="Tortoise">
  </div>
 </body>
</html>

Related Tutorials