Mobile Web Wearable Web

CSS Transforms

Transforms allow you to modify the coordinate space where each element is positioned. The elements can be translated, rotated, and scaled in 2- or 3-dimensional space. According to the API, the coordinate system is a visual formatting model, and positions and sizes in the coordinate space are expressed in pixels, starting in the origin of point with positive values proceeding to the right and down.

To enhance the rendering performance and user experience, you can use hardware acceleration and create fade effects.

When using the CSS transform properties, the Tizen browser requires no prefix, the Firefox browser requires the -moz- prefix, the Chrome and Safari browsers require the -webkit- prefix, and the Opera browser requires the -o- prefix.

Transform Properties

You can define various properties to control the elements within the coordinate space:

  • transform-origin

    This property changes the location of the transformed element. It can only be used with elements for whom the transform property has been declared.

  • transform-style

    This property defines the rendering of the inherited element in the 3D space. Animation property has been added in the example for easier comprehension.

  • perspective

    This property changes the perspective of the element being expressed. A 3D transform element must be used together with this property to emphasize the expression of the X axis.

  • perspective-origin

    This property defines the location facing the element.

  • backface-visibility

    This property defines whether the backface of the transformed element is expressed.

<head>
   <style type="text/css">
      .box 
      {
         transform: rotate(30deg);
         transform-origin: 30% 30%;
         perspective: 220;
         animation: trans-ani 10s infinite linear;
         backface-visibility: visible;

         /* Chrome and Safari browsers */
         -webkit-transform: rotate(30deg);
         -webkit-transform-origin: 30% 30%;
         -webkit-perspective: 220;
         -webkit-animation: trans-ani 10s infinite linear;
         -webkit-backface-visibility: visible;
      }
      .box.case01 
      {
         transform-style: preserve-3d;
         perspective-origin: 30% 30%;

         /* Chrome and Safari browsers */
         -webkit-transform-style: preserve-3d;
         -webkit-perspective-origin: 30% 30%;
      }
   </style>
</head>
<body>
   <h1>transform-origin</h1>
   <div class="boxarea">
      <div class="box">
         <p>transform</p>
         <p>transform-origin: 30% 30%;</p>
      </div>
      <div class="box case01">
         <p>box</p>
      </div>
   </div>
</body>

In addition to transform properties, you can also use various 2D and 3D transform functions.

2D and 3D Transform Functions

The CSS Transforms API supports various transform functions in 2D and 3D.

In 2D transforms, all transform functions are expressed based on a matrix. The X and Y values of the translate(), scale(), and skew() functions can be expressed in individual functions. For example, the X and Y values of the translate() function can be expressed with the translateX(number) and translateY(number) functions.

<head>
   <style type="text/css">
      .box-translate 
      {
         transform: translate(30px, 30px);
         -webkit-transform: translate(30px, 30px);
      }

      .box-scale 
      {
         transform: scale(1.2, 1.2);
         -webkit-transform: scale(1.2, 1.2);
      }

      .box-rotate 
      {
         transform: rotate(45deg);
         -webkit-transform: rotate(45deg);
      }

      .box-skew 
      {
         transform: skew(20deg, 20deg);
         -webkit-transform: skew(20deg, 20deg);
      }

      .box-matrix 
      {
         transform: matrix(0.8, 0.5, 0.9, 0.9, 0, 0);
         -webkit-transform: matrix(0.8, 0.5, 0.9, 0.9, 0, 0);
      }
   </style>
</head>
<body>
   <h1>2d transform</h1>
   <h2>translate</h2>
   <div class="boxarea">
      <div class="box no-transform">
         <p>Original</p>
      </div>
      <div class="box transformed box-translate">
         <p>transform</p>
         <p>transform: translate(30px, 30px);</p>
      </div>
   </div>
</body>

In 3D transforms, the Z axis has been added (for example, translateZ(number) and scale3dZ(number)). When handling 3D transforms, pay attention to the following:

  • If a transform function is used together with the perspective property, the z axis is emphasized.
  • The X, Y, and Z values of the translate3d(), scale3d(), and rotate3d() functions can be expressed in individual functions.
  • In the rotate3d(number, number, number, angle) function, the element rotates according to the assigned parameter (angle) with the X, Y, and Z directional vectors as the center. Each vector can be expressed as an individual function: for example, the rotateX(<angle>) and rotate3d(1, 0, 0, <angle>) functions perform the same task.

The following code snippet demonstrates how to implement a 3D transform. For a complete source code, see 3d_transform.html.

<head>
   <style type="text/css">
      .first-transform {opacity: .5; background: #3399cc;}
      .transformed {opacity: .8;}
      /* translate3d */
      .box-translate3d: hover .first-transform 
      {
         transform: translate3d(-5px, -5px, -60px) rotateY(70deg);
         -webkit-transform: translate3d(-5px, -5px, -60px) rotateY(70deg);
      }
      .box-translate3d: hover .transformed 
      {
         transform: translate3d(15px, 15px, 60px) rotateY(70deg);
         -webkit-transform: translate3d(15px, 15px, 60px) rotateY(70deg);
      }
      /* scale3d */
      .box-scale3d: hover .first-transform 
      {
         transform: scale3d(1, 1, 1) rotateY(70deg);
         -webkit-transform: scale3d(1, 1, 1) rotateY(70deg);
      }
      .box-scale3d: hover .transformed 
      {
         transform: scale3d(0.6, 0.6, 2) rotateY(70deg);
         -webkit-transform: scale3d(0.6, 0.6, 2) rotateY(70deg);
      }
      /* rotate3d */
      .box-rotate3d: hover .first-transform 
      {
         transform: rotate3d(-1, -1, -1, 110deg);
         -webkit-transform: rotate3d(-1, -1, -1, 110deg);
      }
      .box-rotate3d: hover .transformed 
      {
         transform: rotate3d(1, 1, 1, 110deg);
         -webkit-transform: rotate3d(1, 1, 1, 110deg);
      }
      /* matrix3d */
      .box-matrix3d: hover .first-transform 
      {
         transform: matrix3d(0.3, 0.2, -0.9, 0, 0.2, 0.8, 0.2, 0, 0.6, 0, 0.4, 0, 0, 0, 0, 1);
         -webkit-transform: matrix3d(0.3, 0.2, -0.9, 0, 0.2, 0.8, 0.2, 0, 0.6, 0, 0.4, 0, 0, 0, 0, 1);
      }
      .box-matrix3d: hover .transformed 
      {
         transform: matrix3d(0.4, -0.5, 0.8, 0, 0.2, 0.8, 0.2, 0, -0.6, 0, 0.4, 0, 0, 0, 0, 1);
         -webkit-transform: matrix3d(0.4, -0.5, 0.8, 0, 0.2, 0.8, 0.2, 0, -0.6, 0, 0.4, 0, 0, 0, 0, 1);
      }
   </style>
</head>
<body>
   <h1>3D transform</h1>
   <h2></h2>
   <p><strong>First box value:</strong> transform: translate3d(-5px, -5px, -60px) rotateY(70deg);</p>
   <p><strong>Second box value:</strong> transform: translate3d(15px, 15px, 60px) rotateY(70deg);</p>
   <div class="boxarea box-translate3d">
      <div class="box first-transform">
         First box
      </div>
      <div class="box transformed">
         <p>Second Box</p>
         Mouse over or tab here to animate
      </div>
   </div>
</body>
Go to top