ホームページ > 記事 > ウェブフロントエンド > css3を使って3D立体効果を実現する方法
css3を使って3D立体効果を実現する方法
- php中世界最好的语言オリジナル
- 2018-03-14 14:56:071755ブラウズ
今回は css3 を使用して 3D 立体特殊効果を実現する方法を紹介します。 css3 を使用して 3D 立体特殊効果を実現する場合の 注意事項 とは何ですか。実際の事例を見てみましょう。
実際、CSS3 には、非常に素晴らしいことを実現できるツールがたくさんあります。多くの特殊効果は、複雑な JS コードを使用して実現する必要はありませんが、今回は単純な CSS3 コードで実現できます。 3Dボックスの実現とアニメーションの実現。 この正当なボックスを実現するには、css3 の内容を基本的に理解し、css の基本的な構文を理解する必要があります。css3 でマスターする主な内容は次のとおりです。- スケール (スケーリング) を理解する。 css3 のtransform、回転rotate、translateなどの変換属性。
- css3 でのアニメーションの実装を理解します。
- css3 の過剰な特殊効果を理解します。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> html{ background: radial-gradient(ellipse at center, #2A2A2A 0%, #000000 100%); width: 100%; height:100%; } .sence{ width: 600px; height:600px; position: fixed; top: 0; left:0; right:0; bottom:0; margin: auto; } .box{ width: 300px; height:300px; position: relative; transform-style: preserve-3d; transform-origin: center center 75px; /*允许改变转换元素的位置*/ animation: myfirst 3s linear infinite ; /*指的是匀速变化 并且原路返回*/alternate }
.box p{ width: 100%; height:100%; position: absolute; top:0; left:0; border-radius: 5px; transform-style: preserve-3d; box-shadow: 0 0 30px 5px #fff; opacity: 0.8; } @keyframes myfirst { from { transform: skew(0) translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); } to { transform: skew(0deg) translate3d(10px,20px,30px) rotateX(360deg) rotateY(360deg) rotateZ(90deg); } } .box p:nth-child(1){ background-image: url(img/psbe5ZDRJYLJ.jpg);/*照片可以另行添加，也可以换成背景色*/ background-size: 300px 300px; transform-origin: top; transform: rotateX(90deg); } .box p:nth-child(2){ background-image: url(img/psbe7VL5XVBF.jpg); background-size: 300px 300px; transform-origin:left; transform: rotateY(-90deg); } .box p:nth-child(3){ background-image: url(img/psbeL8Q5LRIN.jpg); background-size: 300px 300px; } .box p:nth-child(4){ background-image: url(img/psbeNEXVJIFI.jpg); background-size: 300px 300px; transform-origin:right; transform: rotateY(90deg); } .box p:nth-child(5){ background-image: url(img/psbeUIJ7FZJ6.jpg); background-size: 300px 300px; transform-origin: bottom; transform: rotateX(-90deg); } .box p:nth-child(6){ background-image: url(img/psbR3FYMIPK.jpg); background-size: 300px 300px; transform: translateZ(300px); }</style><body><p class="sence"> <p class="box"> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </p></p></body></html>この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:
フロントエンドでモジュール性を使用する必要があるのはなぜですか?
以上がcss3を使って3D立体効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。