Are you looking for the latest documentation?

Documentation for Acquia Cohesion V6.0 onwards has moved to https://cohesiondocs.acquia.com

    Transform and transition properties

    Transform properties allow you to transform the shape of an element. Transition properties allow you to specify how an element transitions between two states.

    Adding transform and transition properties to a style

    To add Transform and transition properties to a style:

    1. Navigate to the Style builder. This is available when you edit Base styles or Custom styles. For more, see Using the style builder
    2. Within the Style editor area, click on the Properties button
    3. Then select Transform and transition > (Select a Transform and transition sub-group) in the menu.

    The Transform and transition properties include the following groups of fields:

    Transform

    • X rotate - Rotate the element on its X-axis
    • Y rotate - Rotate the element on its Y-axis
    • Z rotate - Rotate the element on its Z-axis
    • X translate - Move the element on the X-axis
    • Y translate - Move the element on the Y-axis
    • X scale - Scale the element on the X-axis
    • Y scale - Scale the element on the Y-axis
    • X skew - Skew the element on the X-axis
    • Y skew - Skew the element on the Y-axis
    • X origin - Set where the element is placed on the X-axis
    • Y origin - Set where the element is placed on the Y-axis

    For details of each property, see Transform properties.

    Transition

    • Type - Set what the transition will be applied to
    • Duration (ms) - Set how long the transition will take
    • Delay (ms) - Set a delay before the transition starts
    • Easing - Set the transition easing

    For details of each property, see Transition properties.

    DX8 knowledge base icon

    Frequently asked questions

    Get instant answers to common questions. Available online 24/7.

    Find answers

    Raise a ticket icon

    Raise a support ticket

    To raise a ticket, sign into Acquia Cloud and select Help in the top menu.

    Raise support ticket

    Acquia

    Copyright © 2020 Acquia, Inc. All Rights Reserved. Drupal is a registered trademark of Dries Buytaert.