CSSパースペクティブ属性の使い方-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

CSSパースペクティブ属性の使い方

青灯夜游

May 29, 2019 pm 02:59 PM

css

perspective 属性は、ビューからの 3D 要素の距離をピクセル単位で定義するために使用されます。このプロパティを使用すると、3D 要素の 3D 要素のビューを変更できます。要素のパースペクティブプロパティを定義すると、要素自体ではなく、その子要素にパースペクティブ効果が適用されます。注: パースペクティブ属性は 3D 変換要素にのみ影響します。

CSSパースペクティブ属性の使い方

#CSS パースペクティブ属性を使用するにはどうすればよいですか?

perspective プロパティは、ビューからの 3D 要素の距離をピクセル単位で定義します。このプロパティを使用すると、3D 要素の 3D 要素のビューを変更できます。要素のパースペクティブ属性を定義すると、要素自体ではなく、その子要素にパースペクティブ効果が適用されます。

構文:

perspective: number|none

ログイン後にコピー

属性値:

● 数値: ビューからの要素の距離 (ピクセル単位) 。

## なし: デフォルト値。 0と同じ。視点は設定されていません。

注: 3D 要素の下部の位置を変更できるように、このプロパティをperspective-originプロパティと一緒に使用してください。

注: perspective 属性は 3D 変換要素にのみ影響します。

css パースペクティブ属性の例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
#div1
{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
perspective:150;
-webkit-perspective:150; /* Safari and Chrome */
}
#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotateX(45deg);
-webkit-transform: rotateX(45deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div id="div1">
  <div id="div2">HELLO</div>
</div>
 
</body>
</html>

ログイン後にコピー

レンダリング:

CSSパースペクティブ属性の使い方

以上がCSSパースペクティブ属性の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7324

Java チュートリアル

1625

CakePHP チュートリアル

1350

Laravel チュートリアル

1262

PHP チュートリアル

1209

Related knowledge

Vue におけるプレースホルダーの意味 May 07, 2024 am 09:57 AM

Vue.js では、placeholder 属性は、input 要素のプレースホルダーテキストを指定します。これは、ユーザーがコンテンツを入力していないときに表示され、入力のヒントや例を提供し、フォームのアクセシビリティを向上させます。その使用方法は、input 要素にプレースホルダー属性を設定し、CSS を使用して外観をカスタマイズすることです。ベストプラクティスには、入力に関連すること、短く明確にすること、デフォルトのテキストを避けること、アクセシビリティを考慮することが含まれます。

jsでのスパンの意味は何ですか May 06, 2024 am 11:42 AM

スパンタグは、テキストにスタイル、属性、または動作を追加できます。色やフォントサイズなどのスタイルを追加するために使用されます。 idやclassなどの属性を設定します。クリック、ホバーなどの関連する動作。さらに処理または引用するためにテキストにマークを付けます。

jsでレムは何を意味しますか May 06, 2024 am 11:30 AM

CSS の REM は、ルート要素 (html) のフォントサイズに対する相対単位です。次の特性があります: ルート要素のフォントサイズに相対し、親要素の影響を受けません。ルート要素のフォントサイズが変更されると、REM を使用する要素もそれに応じて調整されます。任意の CSS プロパティとともに使用できます。 REM を使用する利点は次のとおりです。応答性: さまざまなデバイスや画面サイズでもテキストを読みやすい状態に保ちます。一貫性: Web サイト全体でフォントサイズが一貫していることを確認します。スケーラビリティ: ルート要素のフォントサイズを調整することで、グローバルフォントサイズを簡単に変更できます。

vueに画像を導入する方法 May 02, 2024 pm 10:48 PM

Vue に画像を導入するには、URL、require 関数、静的ファイル、v-bind ディレクティブ、CSS 背景画像の 5 つの方法があります。動的画像は Vue の計算プロパティまたはリスナーで処理でき、バンドルされたツールを使用して画像の読み込みを最適化できます。パスが正しいことを確認してください。そうでないと、読み込みエラーが表示されます。

プロンプトをjsでラップする方法 May 01, 2024 am 06:24 AM

JavaScript でプロンプト() メソッドを使用する場合、次の 3 つの方法で改行を実現できます。 1. 改行する位置に「\n」文字を挿入します。 2. 行に改行文字を使用します。プロンプトテキスト; 3. CSS の "white" -space: pre" スタイルを使用して改行を強制します。

jsのノードとは何ですか May 07, 2024 pm 09:06 PM

ノードは、HTML 要素を表す JavaScript DOM 内のエンティティです。これらはページ内の特定の要素を表し、その要素にアクセスして操作するために使用できます。一般的なノードタイプには、要素ノード、テキストノード、コメントノード、ドキュメントノードなどがあります。 getElementById() などの DOM メソッドを通じて、ノードにアクセスし、プロパティの変更、子ノードの追加/削除、ノードの挿入/置換、ノードのクローン作成などの操作を行うことができます。ノードトラバーサルは、DOM 構造内を移動するのに役立ちます。ノードは、ページコンテンツ、イベント処理、アニメーション、およびデータバインディングを動的に作成するのに役立ちます。