ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

A CSS 3 Tutorial: 2D Special Effects

Updated on May 8, 2014

Goals of This Tutorial: Learn About CSS3 2D Transformations

The two dimensional CSS method to create special effects are known as transformations. They allow you to change size, location, and shape of objects.

The five methods are:

rotate - the element can be change by any number of degrees

scale - which allows you to change the height, width or both height and with of an element

skew - which allows you to skew an element on either the X-coordinate, Y-coordinate or both

translate - which allows you to change the X and Y coordinates of an HTML element

and a matrix method which allow you to combine the rotate, scale, skew and translate methods.



Background of How New Features Are Added to Browsers

To understand the examples which follow one needs to have a little background of how they are introduced in the various browsers available.

For Microsoft Internet Explorer when a new extension becomes availabe its name is preceded by -ms-extension_name. So in the preceding section each of the methods mentioned wouldbe specified as:

-ms-tranform:method_name. For example, the rotate method would be defined as:

-ms-tranform:rotate.

Similarly, Chrome, Firefox, Opera in early versions of their browsers would be specified as -webkit-. -moz-, and -o- respectively and in later versions as -webkit-.

The final version of the name in the unified standard drops the prefix names (i.e. -ms-, -o-,

-moz-, -webkit- are eliminated. This is why the examples which follow have three versions of the method defined.


The rotate() Method

The rotate() method takes one argument, the number of degrees or rotation.The element rotates clockwise at a given positive number of degree. Negative values are allowed and rotates the element counter-clockwise.

Illustration of the rotate() Method Before and After

In this illustration we show the before and after effects of a rotation of 30 degrees. Rotations can be postive or nnegative.
In this illustration we show the before and after effects of a rotation of 30 degrees. Rotations can be postive or nnegative.

The translate() Methods

There are three versions of the translate method:

  • translateX(n) - a 2D translation, moving the element along the X-axis
  • translateY(n) - a 2D translation, moving the element along the Y-axis
  • translate(x,y) - a 2D translation, moving the element along both the X-axis and the Y-axis.

The values are specified in pixels. Negative valuse shift to the left and up. Positive to down and the right of the screen.

Illustration of the Translate() Method

In this example we move the rectangle down and to the right.
In this example we move the rectangle down and to the right.

The scale() Methods

Again we have three methods defined:

scaleX(n) - a 2D scale transformation, changing the element's width

scaleY(n) - a 2D scale transformation, changing the element's height

scale(x,y) - 2D scale transformation, changing the elements width and height

Values are a multiplication factor. scaleX(3) would increase the size 3 fold. scaleX(0.25) would cause the width to be 1/4 of the original size.

Illustration of the scale() Method

The height and width were multiplied by 2. Note the change in the border as well.
The height and width were multiplied by 2. Note the change in the border as well.

The skew() Methods

Again there are three defined methods:

skewX(angle) - 2D skew transformation along the X-axis

skewY(angle) - 2D skew transformation along the Y-axis

skew(angle-X,angle-Y) - 2D skew transformation along the X- and the Y-axis


Illustration of the skew() Method

In this example we used the skew() method on both the x and y axis 15 degrees positive.
In this example we used the skew() method on both the x and y axis 15 degrees positive.
In this example we used the skew() method on both the x and y axis 15 degrees in a negative (counter-clockwise direction.
In this example we used the skew() method on both the x and y axis 15 degrees in a negative (counter-clockwise direction.

The matrix() Method

The matrix() method is the tricky one to try to understand. You can do all of the operations: rotate, translate (move), scale and skew mby manipulating six values.

The default state is represented by transform:matrix(1,0,0,1,0,0); Just remember the "100 rule".

The second and third arguments can be used to skew the element, if used singly. Changing one argument skews the element to the right. Changing only the other argument skews the element to the left.

Using the second and third arguments, one positive and one negative of equal value rotates the element.

The first and fourth arguments scale the element.

Remember that transitions can also be specified in combinations as well (which might be easier than the matrix "shorthand").

The following snapshots show various combinations of the six arguments.

Default transform:matrix(1,0,0,1,0,0)

The default values for matrix are 1,0,0,1,0,0 known as the 100 rule to remember it.
The default values for matrix are 1,0,0,1,0,0 known as the 100 rule to remember it.

matrix() Second Argument Skew to the Right

The matrix second argument has been changed to a positive value, so it skews to the right.
The matrix second argument has been changed to a positive value, so it skews to the right.

matrix() Third Argument Skews to the Left

Changing only the third argument results in a skew to the left.
Changing only the third argument results in a skew to the left.

matrix() Second and Third Arguments Opposite and Equal

Opposite and equal values for the second and third argument result in a rotation.
Opposite and equal values for the second and third argument result in a rotation.

matrix() Fifth and Sixth Arguments Results in a Translation, a move

matrix() fifth and sixth arguments results in a translation.
matrix() fifth and sixth arguments results in a translation.

matrix() First and Fourth Arguments Scale

Notice we can progressively build up the the skew, rotation, translation, and scaling
Notice we can progressively build up the the skew, rotation, translation, and scaling

The transform-origin() Property

By default, the transform property performs its actions around the center of the element be set to the coordinate value (0,0). Transform operations are also order operations. The net result of this is that at times multiple transformations and the order in which they are performed can result in undesirable results. This forms the basis of using the transform-origin property.

What sometimes needs to happen is to set the transform-origin property to be anchored differently, perhaps from the "top left" or "bottom right" point of the element being transformed. In other words, for a rotation, for example, we would spin the image for that new anchor pint and not from the center of the element.

Wrap Up and What's Next

This pretty much takes care of the CSS 3 2D properties. The suggestion would be to work out a number of simple examples. Create a rectangular area (or multiple areas) and work with transformations differing the order in which they are applied.

What's next? It seems like a good idea at this poin to look into CSS 3 three dimensional transformations.

Please Rate This Tutorial On How Well It Fits Your Needs

Cast your vote for Please rate this tutorial and leave your comments

Comments

    0 of 8192 characters used
    Post Comment

    No comments yet.

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)