How to Add Special Effects with CSS Transform in JupiterX
Enhance the visual appeal of your webpage with JupiterX's CSS Transform controls. Add dynamic, eye-catching movements like rotation, scale, and skew to your widgets. Here’s how you can leverage these options to transform your design:
Accessing Transform Controls
- Open your page in Elementor.
- Select the widget you wish to transform.
- Navigate to the Advanced tab and locate the Transform settings.
Important: Remember, CSS Transform is currently only applicable to widgets and containers. Sections, columns, or inner sections are not supported.
Transform Features and How to Use Them
- Rotate: Give your elements a spin or even a 3D effect.
- Rotate 2D: Adjust by degrees using the slider or by inputting a numerical degree value.
- Rotate 3D: Use the 3D rotate to set the axis and perspective(px). Combine Rotate X and Y values to get the visual effect you want.
- Offset: Move your elements sideways or up and down.
- X Offset: Drag the slider or enter a value to move horizontally.
- Y Offset: Drag the slider or enter a value to move vertically.
- Values can be in percentages (%) or pixels (px).
- Scale: Resize elements while maintaining or ignoring their original proportions.
- You can use the proportional scale toggle to lock aspect ratio.
- Adjust the scale using a slider or enter a value in percentages (%).
- Skew: Tilt your elements for an edgy, modern look.
- Skew X: Slant horizontally by adjusting the slider or entering a value.
- Skew Y: Slant vertically by adjusting the slider or entering a value.
- Flip:
- Horizontal Flip: Mirror your element along the X-axis.
- Vertical Flip: Mirror your element along the Y-axis.
Setting Anchor Points Anchor points serve as the base for transform effects for more precision.
- X Anchor Point: Select the left, center, or right to position your element horizontally.
- Y Anchor Point: Select the top, center, or bottom to position your element vertically.
Choosing States and Responsiveness Customize how your element acts normally or when a user interacts with it:
- Toggle between Normal and Hover states.
- Set duration for smooth hover effects.
- Use the Responsive settings (device icon) for breakpoint-specific adjustments.
Remember, practice makes perfect. Play around with these settings to better understand how each transform feature can impact your layout and the user experience.