How To Use The Column Transform Options

Last Update: March 26, 2024

On the Extras tab of the Column Element, you will find Transform options. These can be used in very powerful ways to control the movement, scale and opacity, etc, of your columns in both normal and hover states. Read on to find out more about the various options, and watch the video below for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.

Where To Find Them

The transform options are found under the Extras tab, in Columns, and Nested Columns. There are ten transform options, and they can be applied on both the normal and the hover state of the columm. Let’s go through them one at a time to see what they do.

Column > Transform Effects

The Transform Options

  • Hover Element – Found only on the Hover State, this option allows you to select which element should be hovered to apply the transform hover options. Choose from Self or Parent.

  • Scale X – This option allows you to scale up or down the width of the column, on both normal or hover states, from a value of 0 to a vlue of 2 (double size).

  • Scale Y – This option allows you to scale up or down the height of the column, on both normal or hover states, from a value of 0 to a vlue of 2 (double size).

  • Translate X – This option allows you to adjust the horizontal positioning of the column, on both normal or hover states, by plus or minus 300px.

  • Translate Y – This option allows you to adjust the vertical positioning of the column, on both normal or hover states, by plus or minus 300px.

  • Rotate – This option allows you to adjust the rotation of the column, on both normal or hover states, from -360 to plus 360 degrees.

  • Skew X – This option allows you to skew the column in the horizontal direction, on both normal or hover states, from a value of minus 100 to plus 100.

  • Skew Y – This option allows you to skew the column in the vertical direction, on both normal or hover states, from a value of minus 100 to plus 100.

  • Transform Origin – This option allows you to set the location of the origin point for your selected transformations.

  • Transition Duration – This option controls the duration of the transform effect as you change from Normal to Hover state.

  • Transition Easing – This option allows you to control the easing of the transition. Linear, for example, specifies a transition effect with the same speed from start to end. You can also choose Ease (the default) Ease In, Ease Out, Ease In Out, Linear, and Custom. For custom, there is a link to a website where you can create custom easing.

In this article