Elementor CSS Transformコントロールで特殊効果を追加する方法

Elementorは非常に強力なページビルダーで、デザイナーはプログラミングの知識がなくても美しく機能的なウェブページを作成することができます。直感的なドラッグ＆ドロップのインターフェイスに加え、Elementorは以下のような先進的なデザインツールを提供しています。 CSSトランスフォーム コントロール。これらのコントロールにより、以下のことが可能になる。ページ要素に回転、オフセット、ズーム、傾き、反転などの変形を追加する。独特の視覚効果を生み出している。

をどのように活用するのか、この記事では掘り下げていく。 CSSトランスフォーム デザインに特殊効果を加えるためのコントロールを、各効果の使い方と実践的な適用場面について詳しく解説。

CSS Transformコントロールとは何ですか？

CSS Transformコントロールでは、新しいCSS Transformコントロールを作成するために回転、ズーム、オフセット、チルト、フリップその他ページ上のウィジェットを変更するこれらのコントロールはElementorのこれらのコントロールは Elementor の "詳細タブ"アンダー"変形"の設定で、通常状態とホバー状態の両方をサポートしています。ホバー状態を編集する場合、次のこともできます。効果時間の設定効果がスムーズでジリジリしないようにするためだ。

コントロールの説明

各変形効果は、異なるスクリーンブレイクポイントに対して異なる値に設定することができます。レスポンシブ設定画面は、コントロールのタブにあるデバイスアイコンをクリックすることでアクセスでき、さまざまなデバイスで最良の結果を得ることができます。

回転

回るコントロールは、ページ要素を特定の軸を中心に回転させることができます。回転は、スライダーを使うか、入力ボックスに角度の値を直接入力することで行うことができます。度数(単位）、回転効果を簡単に調整することができます。

• 普通のローテーション： Z軸（2D平面）に沿って要素を回転させます。

• 3D回転： より複雑な視覚効果が必要な場合は、3D回転を有効にすることができます。 X、Y、Z 3D回転は、パースペクティブ効果（ピクセル単位）と組み合わせて立体感を高めることもできる。

実用的なアプリケーション： 例えば、アイコン付きのボタンを 3D回転効果ユーザーがホバーするとボタンがわずかに回転し、デザインに命を吹き込む。

スケール

ズームコントロールでは、ページ要素を拡大縮小することができます。比例して拡大縮小する (X軸とY軸の同時スケーリング)、または軸のスケーリングを個別に調整できます。要素は、スライダーまたは入力ボックスに直接パーセンテージを入力してサイズを変更できます。

• 平等なスケーリング： デフォルトでは、X軸とY軸は同時にスケーリングされ、要素の元のスケールを維持します。
• 個々のスケーリング： 一方向にスケーリングしたい場合は、スケールをアンロックしてX軸またはY軸を個別に調整することができます。

実用的なアプリケーション： 例えば、ユーザーが特定のボタンや画像にカーソルを合わせると、そのボタンや画像が少し拡大表示され、注意を引くことができます。

スキュー

リーンこのコントロールは、X軸とY軸の要素に傾斜効果を加えることができます。傾斜角度は、スライダーを使用するか、入力ボックスにパーセンテージ値を入力することで簡単に調整できます。

• X軸チルト：水平方向ティルト。
• Y軸の傾き： 垂直方向ティルト。

実用的なアプリケーション： 傾きエフェクトは、画像やテキストのブロックに躍動感を加えることができ、モダンでユニークなデザインを作成する際に特に役立ちます。

水平フリップと垂直フリップ（フリップ）

• 水平に反転させる： のX軸上に要素を配置する。ミラーリングフリップだ。
• 垂直フリップ： 要素をY軸上に配置するミラーリングフリップだ。

実用的なアプリケーション： フリップエフェクトは、画像、アイコン、その他のビジュアルエレメントに適用して、ユーザーがホバーしたときにエレメントの反対側を見ることができるようにすることで、インタラクティブな体験を向上させることができます。

アンカー・ポイント

アンカーコントロールでは、変形の開始点、つまり回転、拡大縮小、傾き補正を行う際の要素の中心点を設定することができます。オプションです：

• 水平アンカー： 左、中央、右。
• 垂直アンカー： 上、中央、下。

アンカーポイントを調整することで、変形効果をより正確にコントロールすることができます。例えば、アンカーポイントを要素の左上隅に設定した場合、アンカーポイントを回転させると、要素は左上隅を中心に回転します。センターの代わりに.

実用的なアプリケーション： 例えば、非対称の回転や傾き効果が必要な場合、アンカー位置を調整して、より複雑な視覚効果を作り出すことができる。

ホバー状態にCSS Transformを設定する方法

Elementorではページ要素の通常の状態を設定するためのCSS変換また、ホバー状態（ユーザーがマウス・ポインターを要素の上に置いたとき）に異なる効果を設定することもできます。ホバー状態の変換を編集するには、次のようにします：

1. 要素を選択し、"詳細タブ".
2. 変形設定で調整し、回転、オフセット、スケール、スキュー、フリップなどのエフェクトを選択する。

3. 設定"効果持続時間"で、変身プロセスをスムーズにする。

実用的なアプリケーション： ウェブサイトデザインにおいて、ホバーエフェクトは効果的にユーザーエクスペリエンスを向上させることができます。例えば、回転やズームなどのエフェクトは、ユーザーがボタンの上にマウスを置くとトリガーされ、ボタンをより面白く、インタラクティブに見せることができます。

実践例：CSS Transformを使って3Dボタン効果を実現する方法。

ここでは、CSS Transformコントロールを使って3Dボタン効果を作成する簡単なチュートリアルを紹介します：

1. ボタンウィジェットを追加する： Elementorページエディタで、ボタンウィジェットを追加する。
2. トランスフォームの設定を入力する： ボタンを選択したら、"詳細タブ">"変形".

3. 回転とパースペクティブ効果を適用する：
   • 回転の設定で、3D回転を有効にする。
   • X軸とY軸の回転値を設定する。 自然さを確保するため、回転角度は10度以内に保つことを推奨する。
   • これをパース効果と組み合わせ、例えばパース値を800pxに設定して3D効果を高める。

4. ホバー効果を設定します： ホバー時に回転角度を0度に調整し、ズーム値を1.1に設定してズーム効果を追加し、ホバー時にボタンがズームインするようにします。

この簡単な変形セットアップで、ユーザーの視覚体験を高める3D効果のあるインタラクティブ・ボタンを簡単に作成できます。

概要

CSS TransformはElementorの強力なデザイン機能の重要な一部で、デザイナーは簡単な操作でリッチでダイナミックなエフェクトをページに追加できます。回転、拡大縮小、傾き、反転など、すべてのコントロールを柔軟に組み合わせて、デザインに立体感と面白さを加えることができます。