ホームページ >ウェブフロントエンド >CSSチュートリアル >3D半透明立方体を実装するCSS
今回は、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の高度な使用法
以上が3D半透明立方体を実装するCSSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。