How to Apply CSS3 Effects and Transforms in Dreamweaver
CSS Code Hinting in Dreamweaver
Create a New Style Sheet in the CSS Styles Panel

How to Transform Objects with CSS3

In CSS3, a transform changes the appearance of objects onscreen in a specific way. For example, you might rotate the object or skew its dimensions. Transforms make it easy to create unique presentations from common objects — effects that ordinarily you’d need a designer or graphic artist to create for you. The following list describes the kinds of transformations you can perform.

  • matrix(a, b, c, d, tx, ty): Skews the object using a matrix defined by points a, b, c, and d. It then translates the object’s position on screen by a value denoted by tx and ty. (You can try the matrix() transform out at w3schools.com.)

    There are versions of many of these functions that work on three-dimensional objects. For example, there is a matrix3d() function. These functions add a z-axis to the equation, so that you can manipulate three-dimensional objects in three-dimensional space. You can read more about how the 3D versions work at Mozilla Developer Network and CSS-Tricks.

  • translate(tx, ty), translateX(tx), translateY(ty): Modifies the position of the object on screen by a horizontal amount defined by tx, a vertical amount defined by ty, or both. (You can try the translate() transform at w3schools.com.)

  • scale(x, y), scaleX(x), scaleY(y): Stretches the object horizontally by the amount specified by x, vertically by the amount specified by y, or both. (You can try the scale() transform at w3schools.com.)

  • rotate(angle), rotateX(angle), rotateY(angle): Rotates the object by the number of degrees specified in the desired axis. (You can try the rotate() transform at w3schools.com.)

    Internet Explorer doesn’t support all of the transforms. For example, you’ll find that Internet Explorer 9 doesn’t support the rotateX() and rotateY() functions.

  • skew(angleX, angleY), skewX(angleX), skewY(angleY): Skews the object by the number of degrees horizontally specified by angleX, the number of degrees vertically specified by angleY, or both. (You can try the skew() transform at w3schools.com.)

The best way to understand these transformations is to see them in action. The following procedure helps you create a sample application that demonstrates the transformations you can perform.

  1. Create a new HTML5 file with your text editor.

  2. Type the following code for the HTML page.

    <!DOCTYPE html>
    <html>
    <head>
     <title>Examples of Transforms</title>
     <link rel="stylesheet" href="Transforms.CSS" />
    </head>
    <body>
     <p id="Matrix">Matrix</p>
     <p id="Translate">Translate</p>
     <p id="Scale">Scale</p>
     <p id="Rotate">Rotate</p>
     <p id="RotateY">Rotate Y</p>
     <p id="Skew">Skew</p>
    </body>
    </html>

    The example demonstrates the transformations listed as paragraphs. You can try other transformations by modifying the example (a great idea).

  3. Save the file as Transforms.HTML.

  4. Create a new CSS file with your text editor.

  5. Type the following CSS style information.

    #Matrix
    {
     border: solid;
     border-color: Black;
     border-width: thin;
     font-size: 30px;
     margin: 50px;
     width: 140px;
     height: 40px;
     transform: matrix(0.866,0.5,0.4,0.866,5,15);
     -ms-transform: matrix(0.866,0.5,0.4,0.866,5,15);
     -webkit-transform: matrix(0.866,0.5,0.4,0.866,5,15);
    }
    #Translate
    {
     border: solid;
     border-color: Black;
     border-width: thin;
     font-size: 30px;
     margin: 50px;
     width: 140px;
     height: 40px;
     transform: translate(20px, 30px);
     -ms-transform: translate(20px, 30px);
     -webkit-transform: translate(20px, 30px);
    }
    #Scale
    {
     border: solid;
     border-color: Black;
     border-width: thin;
     font-size: 30px;
     margin: 50px;
     width: 140px;
     height: 40px;
     transform: scale(1.6, 0.75);
     -ms-transform: scale(1.6, 0.75);
     -webkit-transform: scale(1.6, 0.75);
    }
    #Rotate
    {
     border: solid;
     border-color: Black;
     border-width: thin;
     font-size: 30px;
     margin: 50px;
     width: 140px;
     height: 40px;
     transform: rotate(140deg);
     -ms-transform: rotate(140deg);
     -webkit-transform: rotate(140deg);
    }
    #RotateY
    {
     border: solid;
     border-color: Black;
     border-width: thin;
     font-size: 30px;
     margin: 50px;
     width: 140px;
     height: 40px;
     transform: rotateY(140deg);
     -ms-transform: rotateY(140deg);
     -webkit-transform: rotateY(140deg);
    }
    #Skew
    {
     border: solid;
     border-color: Black;
     border-width: thin;
     font-size: 30px;
     margin: 50px;
     width: 140px;
     height: 40px;
     transform: skew(15deg, 30deg);
     -ms-transform: skew(15deg, 30deg);
     -webkit-transform: skew(15deg, 30deg);
    }

    Each of these transforms uses precisely the same paragraph format so that you can better understand how they work. The use of a border makes it easier to understand the transform because the combination of words and an onscreen object convey more information (something to remember when you create your own test applications).

    Transforms are considered experimental, even though they appear as part of the specification. In order to use them with Internet Explorer 9+, you must include the -ms- prefix. Both Safari and Chrome require the -webkit- prefix. This is why you see each transform listed three times. The transforms should also work with both Opera and Firefox without any problem.

  6. Save the file as Transforms.CSS.

  7. Load the Transforms example.

    You see the transformation effects. All these transforms are using the same font, font size, and box size, so the differences you see are due solely to the transformation taking place. Notice that the rotateY() transformation actually shows the text backward.

    image0.jpg

    Try modifying the transform values to see how the changes affect the output. You’ll be surprised at just how flexible these functions are.

It’s possible to combine transforms to create even more unusual effects. Simply separate them with a space. For example, to combine a rotate() with a skew(), you’d type transform: rotate(25deg) skew(15deg, 30deg);.

blog comments powered by Disqus
How to Create a Media Query in Dreamweaver
Preview HTML Documents on a Cellphone, Tablet, or Laptop in Dreamweaver
How to Build Compound Styles in Cascading Style Sheets (CSS)
4 Places to Find CSS3 Generators
How to Make Cascading Style Sheet (CSS) Tags Redefine Styles
Advertisement

Inside Dummies.com