CSS変換：設(shè)計(jì)上の困難を解決するための強(qiáng)力なツール

この記事では、実際のアプリケーションでのCSS変換の力を調(diào)査し、さまざまな設(shè)計(jì)上の課題を効果的に解決し、魅力的な視覚効果を生み出す方法を示します。要素を垂直に整列させ、美しい矢印を作成し、ロードアニメーションを構(gòu)築し、フリップアニメーションを?qū)g裝する方法を?qū)Wびます。

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

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

この記事では、変換の基本については説明しません。コンバージョンに慣れていない場(chǎng)合は、最初に2Dおよび3D変換の紹介を読むことをお?jiǎng)幛幛筏蓼埂?

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

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

および

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

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

<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%);
}

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

perspective(1px)

矢印を作成します

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

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

純粋な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を使用して「ローター」ロードアニメーションを作成します（この部分は元のテキストに似ています。複製を避けるために、詳細(xì)コードはここで省略され、概要のみが保持されます）

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

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

最後に、フリップアニメーションのある畫像の例を見てみましょう。マウスを?qū)懻妞紊悉衰邾啸辚螗挨工毪?、それはひっくり返り、その説明を表示します。これは、Instagramのようなサイトで非常に便利です。 （コンテンツのこの部分は元のテキストに似ています。複製を避けるために、詳細(xì)なコードはここで省略されており、概要のみが保持されます）

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

予防策

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

概要

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

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

以上が現(xiàn)実の世界でCSS変換を使用しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。