現実の世界でCSS変換を使用します

CSS変換：設計上の困難を解決するための強力なツール

この記事では、実際のアプリケーションでのCSS変換の力を調査し、さまざまな設計上の課題を効果的に解決し、魅力的な視覚効果を生み出す方法を示します。要素を垂直に整列させ、美しい矢印を作成し、ロードアニメーションを構築し、フリップアニメーションを実装する方法を学びます。

CSS3変換は2012年に標準になり、それ以前には一部のブラウザがサポートを提供していました。変換を使用すると、回転、スケーリング、傾斜要素などのWeb要素を簡単に変換して、1つのコードで達成するのが困難でした。 CSS変換は、2Dおよび3D変換をサポートします。

ブラウザの互換性の観点から、すべての主流のブラウザは、インターネットエクスプローラー9以降を含む2D変換をサポートしています。 3D変換は、IE10以降で部分的にのみサポートされています。

この記事では、変換の基本については説明しません。コンバージョンに慣れていない場合は、最初に2Dおよび3D変換の紹介を読むことをお勧めします。

子要素の垂直アライメント

要素の垂直方向のアライメントは、常にWebデザイナーにとって問題でした。簡単に思えますが、実際には多くの面倒なテクニックがあります。いくつかの方法は、

および

を使用することを推奨する方法もありますが、他の方法ではdisplay: inlineおよびそれらに関連するスタイルを使用することをお勧めします。もちろん、FlexBoxまたはグリッドはこの問題を解決できますが、コンポーネントが小さい場合は、変換がより簡単なオプションになる場合があります。 vertical-align: middle display: table要素が非常に可変的な場合、垂直方向のアライメントはより複雑になる可能性があります。 CSS変換は、この問題を解決するための効果的な方法を提供します。 2つのネストされたdivがある簡単な例です。

親要素の幅、高さ、境界線を設定し、間隔を追加してより美しくするために：

<div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  </div>
</div>

<div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  </div>
</div>

次に、

を使用してテキストを垂直に中央に配置します。

.parent {
  height: 300px;
  width: 600px;
  padding: 0 1em;
  margin: 1em;
  border: 1px solid red;
}
.child {
  font-size: 1.2rem;
}

ぼやけを避けるために、transform: translateY(-50%);：

を追加できます

.child {
  font-size: 1.2rem;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

このように、テキストの長さが異なっていても、子の要素は完全に垂直に中心にすることができます。

perspective(1px)

矢印を作成します

.child {
  transform: perspective(1px) translateY(-50%);
}

もう1つの興味深いユースケースは、スケーラブルなダイアログ矢印を作成することです。グラフィックエディターを使用して矢印を作成できますが、これは面倒で、ビットマップの画像はうまく縮小できない場合があります。

純粋なCSSソリューションがより効果的です。テキストボックスがあると仮定します：

このように、ページのフォントサイズが変更されたとしても、矢印は割合を維持できます。

<div class="box">
  <div class="box-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  </div>
</div>

「ジャンプボール」の読み込みアニメーション

::beforeを作成します

読み込みプロセスを示すために、CSSアニメーションと変換を使用してジャンプボールロードアニメーションを作成できます。

<div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  </div>
</div>

<div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  </div>
</div>

.parent {
  height: 300px;
  width: 600px;
  padding: 0 1em;
  margin: 1em;
  border: 1px solid red;
}
.child {
  font-size: 1.2rem;
}

svgを使用して「ローター」ロードアニメーションを作成します（この部分は元のテキストに似ています。複製を避けるために、詳細コードはここで省略され、概要のみが保持されます）

SVGを使用して、スピナーなどのより複雑なロードアニメーションを作成できます。 SVG要素、CSSアニメーション、および変換を組み合わせることで、視覚的に魅力的な負荷効果を作成できます。

フリップアニメーションを作成します

最後に、フリップアニメーションのある画像の例を見てみましょう。マウスを写真の上にホバリングすると、それはひっくり返り、その説明を表示します。これは、Instagramのようなサイトで非常に便利です。 （コンテンツのこの部分は元のテキストに似ています。複製を避けるために、詳細なコードはここで省略されており、概要のみが保持されます）

3D変換とtransform-style: preserve-3d;、およびtransitionプロパティを使用して、スムーズなフリップアニメーション効果を実現できます。

予防策

CSS変換とアニメーションは強力ですが、ユーザーエクスペリエンスの低下を引き起こすことを避けるためには注意して使用する必要があります。

概要

この記事では、CSS変換を他のテクノロジーと組み合わせてさまざまな設計タスクを解決する方法を示しています。要素を垂直に整列させ、スケーラブルな矢印を作成し、ロードアニメーションをジャンプおよび回転させ、フリップアニメーションを実装する方法を学びました。 CSSは、誇示するだけでなく、ユーザーエクスペリエンスを向上させるために使用する必要があります。

（元のテキストの「CSS変換に関する「よくある質問」の内容は、この記事の内容と非常に一致しているため、ここでは省略されています）

以上が現実の世界でCSS変換を使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。