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

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

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

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

コントロールの説明

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

回転

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

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

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

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

スケール

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

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

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

スキュー

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

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

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

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

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

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

アンカー?ポイント

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

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

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

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

ホバー狀態(tài)にCSS Transformを設(shè)定する方法

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

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

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

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

実踐例：CSS Transformを使って3Dボタン効果を?qū)g現(xiàn)する方法。

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

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

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

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

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

概要

CSS TransformはElementorの強(qiáng)力なデザイン機(jī)能の重要な一部で、デザイナーは簡単な操作でリッチでダイナミックなエフェクトをページに追加できます?；剀灐埓罂s小、傾き、反転など、すべてのコントロールを柔軟に組み合わせて、デザインに立體感と面白さを加えることができます。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個(gè)人サイト、中小企業(yè)サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨詢：1025174874
三 Eメール：info@361sale.com
④ 勤務(wù)時(shí)間: 月～金、9:30～18:30、祝日休み