コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > フロントエンドQ&A > CSSのtransform-style属性の使い方

CSSのtransform-style属性の使い方

藏色散人
リリース： 2019-05-30 09:35:37
オリジナル
3316 人が閲覧しました

csstransform-style 属性は、3D 空間でネストされた要素をレンダリングする方法を指定します。その構文は、transform-style: flat|preserve-3d です。この属性は、transform 属性と一緒に使用する必要があります。

CSSのtransform-style属性の使い方

#css 変換スタイル属性を使用するにはどうすればよいですか?

関数:transform-style 属性は、3D 空間でネストされた要素をレンダリングする方法を指定します。

構文: 

transform-style: flat|preserve-3d
ログイン後にコピー

説明:

flat 子要素は 3D 位置を保持しません。

preserve-3d 子要素は 3D 位置を保持します。

注:

この属性は、transform 属性と一緒に使用する必要があります。

css 変換スタイルのプロパティの使用例

<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
position: relative;
height: 200px;
width: 200px;
margin: 100px;
padding:10px;
border: 1px solid black;
}
#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotateY(60deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(60deg); /* Safari and Chrome */
-webkit-transform-style: preserve-3d; /* Safari and Chrome */
}
#div3
{
padding:40px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateY(80deg);
-webkit-transform: rotateY(-60deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div id="div1">
  <div id="div2">HELLO
  <div id="div3">YELLOW</div>
  </div>
</div>
</body>
</html>
ログイン後にコピー

効果の出力:

CSSのtransform-style属性の使い方

以上がCSSのtransform-style属性の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
css transform-style
ソース：php.cn
前の記事：CSSのborder-collapseプロパティの使い方 次の記事：CSSのtext-wrap属性の使い方
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
v-bind: Vue.js の動的値のスタイル v-bind:style を使用して動的値を使用すると、v-bind:style が機能しないという問題が発生しますが、v-bind:style は正しい値を取得していると確信して...
から 2024-03-31 19:46:15
0
2
345
テーブル tr:first-child td の機能上の問題 CSS とテーブルを使用して、分子と分母の間に分数線を配置します。複素分数の場合、Ant ブラウザでは正しく動作しません。以下は、この問題を示す Tryit エディターで使用される...
から 2024-03-30 13:24:05
0
1
295
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート