CSS3でフォント反転を設定する方法-フロントエンドQ&A-php.cn

CSS3でフォント反転を設定する方法

WBOY

リリース： 2022-08-11 17:33:07

オリジナル

3260 人が閲覧しました

CSS3では、rotate()関数でtransform属性を使用してフォント反転を設定できます。rotate()関数のパラメータを「180deg」に設定するだけで、transform属性で要素を回転させることができます。 rotate() 関数は要素の回転スタイルを定義でき、構文は「font element {transform:rotate(180deg);}」です。

CSS3でフォント反転を設定する方法

このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css3でフォント反転を設定する方法

cssでフォントを180度回転したい場合は、transform属性とrotate()関数を使用します。

Transform は CSS3 の画期的な機能の 1 つです。要素の移動、回転、傾き、スケーリングを実現でき、マトリックス手法もサポートしています。トランジションとアニメーションの知識を学習すれば、置き換えることができます。これまでしかできなかった機能の数々、Flashでしか実現できないエフェクト。

Transform は文字通り変形を意味します。CSS3 では、Transform によってサポートされるいくつかの操作には、

(1) Rotate 回転、
が含まれます。 (2) 歪みスキュー、
(3) スケール
(4) 移動移動
(5) 行列変換行列。

rotate() 関数は 2D 回転を定義し、角度はパラメーターで 180 度として指定されます。

CSS 座標系では、X 軸の正の方向は左から右、Y 軸の正の方向は上から下、Z 軸の正の方向は画面内から画面外へ。

観察者の視線が軸の正の方向にある場合、回転Yが正の場合は要素が反時計回りに回転することを意味し、負の場合は要素が回転することを意味します時計回り;

観察者の視線が Z 軸の正の方向に沿っている場合、rotateZ が正の場合は要素が反時計回りに回転することを意味し、負の場合は要素が時計回りに回転することを意味します。

例は次のとおりです:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  p{
    width:200px;
    transform:rotate(180deg);
  }
  </style>
</head>
<body>
  <p>字体翻转</p>
</body>
</html>

ログイン後にコピー

出力結果:

##(学習ビデオ共有: CSS3でフォント反転を設定する方法 css ビデオチュートリアル