Web Interface Design

Learn How to Build Responsive Websites with HTML, CSS, and Media Queries

Back to classes

Choose a class
  • Graphical effects

    In This Lesson You Will Learn

    • how to transform elements using CSS.
    • how to create 3D transformations.
    • how to use filters and masks.

    A host of new functions have been introduced in CSS3 that enable you to handle elements in a way similar to that you have been familiar with until now only using graphics and image-processing programs. This includes, for instance, transformations (changes of shape), masks, and filters. The operations involved are not restricted to images, of course, but can also be used for almost any HTML element. I would like to present these new functions to you below.

    You will find the examples and exercises again in the css3_advanced folder as part of the support material for this course.

    2.1Transformations

    You are perhaps already familiar with the Transform menu in Photoshop or Illustrator. The options for changing shape that you can apply to images and graphics are now also available to you for handling HTML elements: rotate , scale , skew , and translate . The CSS property for this is aptly called transform, and again currently has a vendor prefix:

    The type of transformation you want comes after the colon, followed by the parameter to be transformed in round brackets (without a space).

    Examples (without vendor prefixes):

    transform: rotate(45deg); Rotate 45 degrees

    transform: scale(1.5); Scale by 150%

    transform: skewX(-30deg); Skew x-axis -30 degrees

    The following types of transformation are available:

    Transformation Description Parament/unit of measure
    rotate(angle) 2D rotation Degree for instance,
    transform: rotate(30deg)
    rotateX(angle) 3D rotation around the x-axis
    rotateY(angle) 3D rotation around the y-axis
    rotateZ(angle) 3D rotation around the z-axis (identical to rotate())
    scale(x, y) 2D scale Decimal values (1 equals 100%), e.g.
    transform: scaleY(0.5)
    (50%, vertical reduction)
    scaleX(x) Scaling along the x-axis
    scaleY(y) Scaling along the y-axis
    scaleZ(z) Scaling along the z-axis
    skew(x-angle, y-angle) 2D skew along the x- and y-axis Degree for instance,
    transform: skewX(10deg)
    skewX(angle) 2D skew along the x-axis
    skewY(angle) 2D skew along the y-axis
    translate(x, y) 2D translation Measures of length (px, em, etc.) for instance,
    transform: translate(10px, 20px)
    translateX(x) Translation on the x-axis
    translateY(y) Translation on the y-axis
    translateZ(z) Translation on the z-axis

    Table 2.1 CSS transformations

    2.1.1Differences with other properties

    The first question which obviously arises is about how a transformation using scale differs from resizing an element using width or height. The differences between them are as follows:

    • The transform property only changes an element “virtually” and acts rather like an effect filter. Although the element is displayed as larger in the browser, it still retains its original size internally. — It is as if you were looking at it through a magnifying glass. This means that scale does not affect the surrounding elements either (they are not pushed aside by scaling).
    • If you use scale, the element and its content (including text) are scaled! You can, for example, use scaleX to distort an element and text horizontally, which is not possible using width.

    The same principle also applies for translate compared to performing a displacement using, for instance, position:relative.

    2.1.2Defining the transformation point

    The exercise files can be found in the support material under
    css3_advanced/transformations.html and
    css3_advanced/styles/transformations.css.

    Open the file transformations.html as well as the file transformations.css from the styles folder.

    The HTML file contains three elements:

    The CSS file already contains all the definitions for these three elements. Firstly, a collective selector features the width, height, and the transform-origin property in the three browser-specific versions. This property allows you to define the reference point for the transformation. You are perhaps already familiar with this principle from graphics and image-processing programs where you can define the transformation point using an icon:

    Fig. 7 Icon for defining the transformation point in Photoshop, Illustrator, InDesign, etc.

    The general syntax used is as follows:

    The possible values are:

    x-axis left
    center
    right
    Measure of length (px, em, %, etc.)
    y-axis top
    center
    bottom
    Measure of length (px, em, %, etc.)

    So, for instance, if the following definition is specified:

    an element would be scaled by 200% going from the top left corner to the bottom right corner.

    Trying out different types of transformation

    The three selectors: #rotate, #scale, and #skew in the file transformations.css already contain definitions for the relevant transformations, the element #skew even two (skewX and translate).

    Fig. 8 The first element performs a 45-degree rotation, the second carries out a 200% magnification, and the third performs a -30-degree tilt and is shifted 7rem to the right and 5rem downward. The text contained in the element and the effects (box-shadow and gradient) are also transformed.

    Exercise 3: Playing with Different Types of Transformation

    Try different types of transformation for the three selectors from Table 2.1 .

    2.1.33D transformations

    As you have perhaps already seen in Table 2.1, you can use CSS to transform elements via the x-, y-, and z-axis. This includes rotation (rotateX, rotateY, rotateZ), scaling (scaleX, scaleY, scaleZ), and translate (translateX, translateY, translateZ).

    Fig. 9 Elements can be transformed in CSS via three axes.

    This enables you to achieve interesting 3D effects, such as cards with a front and back (e.g. playing cards or business cards) that the user can flip:

    Fig. 10 3D card with a front and back that can be flipped.

    The exercise files can be found in the support material under
    css3_advanced/flip_cards.html and
    css3_advanced/styles/flip_cards.css.

    Walkthrough: Flip Cards

    1. Open the files flip_cards.html and flip_cards.css. The HTML code is as follows:

      This means that the elements with the IDs flip_front and flip_back display the front and back respectively of our card. They each can have any content. The wrapping element with the ID flip_panel is required so that you can assign both sides of the card the same vanishing point, i.e. the same perspective.

    2. In CSS the elements have already been assigned a number of basic properties:

      All the elements are positioned absolutely. This is the only way that allows both sides of the card to actually be placed one on top of the other to give an exact fit. The wrapping element #flip_panel was centered in the browser window with a width of 70%.

      At the moment, the back of the card is in front of the front side. Depending on the size of the browser window, the latter protrudes below the back of the card.

    3. Now insert the common properties of the front and back:

      When this is done, you can still not see any change in the browser. However, the transform-style: preserve-3d property makes it possible for both sides of the card to assume the perspective of the wrapping element #flip_panel and therefore appear in the same 3D space. The backface-visibility property ensures that the back of the card can no longer be seen later on. As the action of flipping the card is obviously going to be animated, we also need a transition that, in this case, lasts one second.

    4. The separate properties for both sides now follow:

      The back is turned -180° so that it is facing “behind” (the angle is actually only -179° as, if -180° exactly is specified, some browsers do not know in which direction the element should be turned, and it is sometimes turned in the wrong direction). Now the backface-visibility property is also applied; the back of the card is no longer visible.

      The rotation of the front is also initialized, but, when set at 0°, it does not produce any visible change.

    Now only the flipping of the card is still missing. This raises the question, first of all, about how the user can turn the card round, i.e. about which event triggers the animation. This first suggestion would perhaps be a :hover. However, there are several reasons why this is not the best solution in this situation:

    • If you want to read the back of the card, you need to keep the mouse still to prevent the card from flipping back again.
    • During the turning action, the card moves under the mouse pointer, thus ending up sometimes suddenly outside the mouse pointer. This would result in the :hover status and, therefore, in the animation being interrupted. In the worst case, the card would then flip back and forth.
    • Touchscreens do not support the :hover function. Although it is emulated by most devices, it is still “sticky”, which means that you cannot flip back again a card that has already been flipped.

    In this case, a better solution is provided for us by CSS3: the :target pseudo-class, which you can use to style HTML elements that you can jump to using an anchor link (compare section 1.3).

    Our card already has links in terms of the small info button and the Back button. The front button refers to the whole #flip_panel. This allows us to rotate the card, which means changing the CSS properties of the front and back simultaneously. The back button can refer to any ID. It is only used to remove the :target again from the #flip_panel. Obviously, an ID that we already have, e.g. #flip_front is useful in this case.

    1. Insert two new selectors with the following properties:

      This allows you to rotate the front to the back and the back to the front. But the animation still does not look very impressive at the moment. We still need to add perspective. This is the task of the wrapping selector #flip_panel. Add the perspective property to it:

      The perspective property determines the element’s distance from the observer. The lower the value, the closer the element. Try out different values.

    But the method that uses :target also has a downside. In many layouts the card “jumps” when you click the button as the browser naturally tries to jump to the anchor. In practice, you can also use JavaScript instead in this case. In the support material you will find a version where the #flip_panel has the flipped class added to it dynamically using JavaScript. This also allows us to assign different properties to the elements. Simply un-comment the link to the JavaScript file in the head of the HTML file. This could appear as follows in CSS:

    ×

    Responsive Web Design

0

Demo mode: Learning progress will not be saved.

Register to save your learning progress