ホームページ > 記事 > ウェブフロントエンド > CSS3でフォント反転を設定する方法
CSS3でフォント反転を設定する方法
- WBOYオリジナル
- 2022-08-11 17:33:073162ブラウズ
CSS3では、rotate()関数でtransform属性を使用してフォント反転を設定できます。rotate()関数のパラメータを「180deg」に設定するだけで、transform属性で要素を回転させることができます。 rotate() 関数は要素の回転スタイルを定義でき、構文は「font element {transform:rotate(180deg);}」です。
このチュートリアルの動作環境: 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>出力結果:
##(学習ビデオ共有: 
css ビデオ チュートリアル
html ビデオ チュートリアル )
以上がCSS3でフォント反転を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。