検索

今回は、CSS を使用して 3D 半透明立方体を実装する方法について説明します。CSS を使用して 3D 半透明立方体を実装する場合の 注意事項 は何ですか? ここで実際のケースを見てみましょう。

レンダリングは次のとおりです:

サンプルコード:

 
 <title> new document </title>
 <meta>
 <meta>
 <meta>
 <meta>
 <meta>
 <style>
//css部分
html{
	font-size:62.5%;
	}
	img{
	width:300px;
	height:300px;
	}
 #stage{
//搭建一个舞台
margin-top:200px;
	margin-left:auto;
	margin-right:auto;
	width:300px;
	height:300px;
	perspective:1200px;
	font-size:5em;
	font-weight:bold;
	color:#cc00ff;
}
 .cube{
//cube是正方体
position:relative;
	transform:rotateX(-45deg) rotateY(45deg);
	transform-style:preserve-3d;
	transition: all .6s;
 }
 .side{
	color:blue;
	text-align:center;
	width:300px;
	height:300px;
	line-height:300px;
	position:absolute;
	background:#cc66ff;
	opacity:0.5;
	border:1px solid rgba(117,4,24,0.5);
}
//.front到.bottom是6个面分别进行旋转,构建出正方体的整形
.front{
	transform:translateZ(150px);
	}
	.back{
	transform:rotateY(180deg) translateZ(150px);
	}
	.left{
	transform:rotateY(-90deg) translateZ(150px);
	}
	.right{
	transform:rotateY(90deg) translateZ(150px);
	}
	.top{
	transform:rotateX(90deg) translateZ(150px);
	}
	.bottom{
	transform:rotatex(-90deg) translateZ(150px);
	}
	#stage:hover .cube{
//设置鼠标移上正方体时是否需要过渡效果以及过渡效果开始和结束的时间和速度
transform:rotateX(-45deg) rotateY(225deg);
	transition:transform .6s;
	}
 </style>
 

	<p>
	</p><p>
	</p><p><img  src="/static/imghwm/default1.png" data-src="6.gif" class="lazy" alt="3D半透明立方体を実装するCSS" ></p>
	<p><img  src="/static/imghwm/default1.png" data-src="2.jpg" class="lazy" alt="3D半透明立方体を実装するCSS" ></p>
	<p><img  src="/static/imghwm/default1.png" data-src="3.jpg" class="lazy" alt="3D半透明立方体を実装するCSS" ></p>
	<p><img  src="/static/imghwm/default1.png" data-src="4.jpg" class="lazy" alt="3D半透明立方体を実装するCSS" ></p>
	<p><img  src="/static/imghwm/default1.png" data-src="5.jpg" class="lazy" alt="3D半透明立方体を実装するCSS" ></p>
	<p><img  src="/static/imghwm/default1.png" data-src="1.jpg" class="lazy" alt="3D半透明立方体を実装するCSS" ></p>
	
	
 

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、その他の情報に注目してください。関連記事はPHP中国語サイトにあります!

推奨読書:

CSSでのbackground-attachmentの高度な使用法

クリックして拡大するCSS3アニメーションの例

ブートストラップ実装の価格表

以上が3D半透明立方体を実装するCSSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
Svelteでスタイルを書くのが好きなことSvelteでスタイルを書くのが好きなことApr 15, 2025 am 09:25 AM

最近、Svelteの周りには多くの当然の誇大広告があり、プロジェクトは24,000を超えるGitHubスターを蓄積しています。間違いなく最も単純なJavaScript

毎週のプラットフォームニュース:CSSコラムスパンプロパティ、ADAはWebサイトに適用され、自動生成画像の説明毎週のプラットフォームニュース:CSSコラムスパンプロパティ、ADAはWebサイトに適用され、自動生成画像の説明Apr 15, 2025 am 09:23 AM

今週のラウンドアップ:マルチコラムレイアウトは幅広いサポートを得ます。ADAは小売業者にとってより多くのA11yを意味し、Googleはすべての空の画像について何かをしています

スタイリングの現在の状態は2019年に選択されますスタイリングの現在の状態は2019年に選択されますApr 15, 2025 am 09:18 AM

CSSの最も希望のある機能を最後にコンパイルしたときから、スタイリングフォームコントロールが大きな質問でした。トップ5、i&#039; d say。そしてネイティブの

これらの10のプロジェクトのアイデアで2020年にフロントエンドマスターになるこれらの10のプロジェクトのアイデアで2020年にフロントエンドマスターになるApr 15, 2025 am 09:17 AM

これは、Devで書いたQuickieの記事から少し更新されたクロスポストです。 I&#039; M出版&#039;

なぜ小包が開発のために私の頼りになるバンドラーになったのかなぜ小包が開発のために私の頼りになるバンドラーになったのかApr 15, 2025 am 09:16 AM

今日は、アプリケーションバンドラーについて話します。これは、開発者としての生活を簡素化するツールです。彼らのコアで、バンドラーは複数のファイルからあなたのコードを選択します

毎週のプラットフォームニュース:Galaxy Store、Tappable Stories、CSS SubgridのWebアプリ毎週のプラットフォームニュース:Galaxy Store、Tappable Stories、CSS SubgridのWebアプリApr 14, 2025 am 11:20 AM

今週のラウンドアップ:Firefoxは錠前屋のような力を獲得し、Samsung&#039; s Galaxy StoreがプログレッシブWebアプリをサポートし始め、CSS SubgridはFirefoxで出荷しています

毎週のプラットフォームニュース:インターネットエクスプローラーモード、検索コンソールの速度レポート、通知プロンプトの制限毎週のプラットフォームニュース:インターネットエクスプローラーモード、検索コンソールの速度レポート、通知プロンプトの制限Apr 14, 2025 am 11:15 AM

今週のラウンドアップ:Internet ExplorerがEdgeに進み、Google Search Consoleが新しい速度レポートを宣伝し、FirefoxがFacebookの通知を提供します

CSSカスタムプロパティを使用したスコープのパワー(および楽しい)CSSカスタムプロパティを使用したスコープのパワー(および楽しい)Apr 14, 2025 am 11:11 AM

おそらく、CSS変数に少なくとも少し精通しているでしょう。そうでない場合は、ここに2秒の概要があります:それらは本当にカスタムプロパティと呼ばれます、あなたは設定します

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール