コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > 3Dを実現するピュアCSSコード（立方体、ダイナミックな立体写真集、平面的な星空）

3Dを実現するピュアCSSコード（立方体、ダイナミックな立体写真集、平面的な星空）

不言
リリース： 2018-08-14 16:55:55
オリジナル
6868 人が閲覧しました

この記事の内容は、純粋な CSS を使用して 3D を実現するためのコード (立方体、ダイナミックな立体写真アルバム、平面星空) です。コードが必要な場合は、参照してください。

1. 立方体

まず第一に、立方体は 6 つの同一の面で構成されます。 (コードの三次元構造による)

コードは次のとおりです: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>正方体</title>
<style>
    .d3{
        height: 300px;
        width:300px;
        perspective: 800px;
        margin:140px auto;
        border:1px solid #ccc;    }
    .stage{
        height: 300px;
        width: 300px;
        transform-style: preserve-3d;
        
        position: relative;
        transform: rotateX(45deg) rotateY(45deg);
        
    }
    .role{
        height: 300px;
        width: 300px;
        position: absolute;
    }
    .stage{
        animation: dong 3s linear infinite;（这是舞台）

    }
    .stage:hover{
        animation: paused;
    }
    @keyframes dong{（这是使舞台旋转的动画）
        from{
        transform: rotateX(45deg) rotateY(45deg);            
        }
        to{
        transform: rotateX(405deg) rotateY(405deg);
        }
    }
    .di1{（正方体的前面）
        background: rgb(21, 163, 52);
        transform: translateZ(150px);（沿着z轴向前移动150px）
        font-size:100px;
        font-family:KaiTi;
        text-align: center;
        line-height: 300px;
    }
    .di2{（正方体的后面）
        background: blue;
        transform: translateZ(-150px) rotateY(180deg);（沿着z轴向前移动150px然后沿着y轴旋转180°*注意顺序哦是先移动后旋转）
        font-size:100px;
        font-family:KaiTi;
        text-align: center;
        line-height: 300px;
    }
    .di3{（正方体的左面）
        background: purple;
        transform: rotateY(-90deg) translateZ(150px);
        font-size:100px;
        font-family:KaiTi;
        text-align: center;
        line-height: 300px;
    }
    .di4{（正方体的右面）
        background: pink;
        transform: rotateY(90deg) translateZ(150px);
        font-size:100px;
        font-family:KaiTi;
        text-align: center;
        line-height: 300px;
    }
    .di5{（正方体的上面）
        background: red;
        transform: rotateX(90deg) translateZ(150px);
        font-size:100px;
        font-family:KaiTi;
        text-align: center;
        line-height: 300px;
    }
    .di6{（正方体的下面）
        background: yellow;
        transform: rotateX(-90deg) translateZ(150px);
        font-size:100px;
        font-family:KaiTi;
        text-align: center;
        line-height: 300px;
    }
</style>
</head>
<body>
    <div>
        <div>
        （将正方体分为六个相同的面）
            <div class="role di1">前</div>
            <div class="role di2">后</div>
            <div class="role di3">左</div>
            <div class="role di4">右</div>
            <div class="role di5">上</div>
            <div class="role di6">下</div>
        </div>
    </div>
</body>
</html>
ログイン後にコピー

2. ダイナミックな 3 次元フォト アルバム

フォト アルバムを 3 次元 3D 効果にデザインします

回転、移動、傾き、3D 効果を使用して、アルバムをさらに美しくします。
コードは以下の通りです: 

（将第一张定好位置后将后面的依次排列）
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事例一</title>
    <style>
        body{
            height: 100vh;
        }
        .div {
            height: 500px;
            width: 800px;
            perspective: 800px;
            margin: 50px auto;
        }

        .div1 {
            height: 500px;
            width: 800px;
            transform-style: preserve-3d;
            position: relative;
            /* transform: rotateY(-10deg); */
        }
        .div_0{
            height:400px;
            width:600px;
            position: absolute;
            margin-top:110px;
            margin-left:50px;
        }
        .div_1{
            height:400px;
            width:600px;
            background: url(../day03/timg.jpg);
            background-size: 600px 400px;
            border-radius: 20px;
            transform-origin: right bottom;
            transition: 3s;
        }

        .div_2{
            background: url(../day03/timg1.jpg);
            border-radius: 20px;
            background-size: 600px 400px;
            transform-origin: right bottom;
            transform: rotateZ(2deg) translateZ(-20px) translateX(20px) translateY(-20px);
        }
        .div_2:hover{
            transform: rotateZ(0) translateZ(0)translateX(0)translateY(0);
            transition: 1s;
        }
        .div_2:hover~.div_1{
            /* transform-origin: right bottom; */
            transform: rotateZ(2deg) translateZ(20px) translateX(20px) translateY(-20px);
            transition: 1s;
        }
        /* body:hover .div_1{
            opacity: 0;
            transition: 3s;
        } */

        .div_3{
            background: url(timg2.jpg);
            border-radius: 20px;
            background-size: 600px 400px;
            transform-origin: right bottom;
            transform: rotateZ(4deg)translateZ(-40px)translateX(40px)translateY(-40px);

        }
        .div_3:hover{
            transform: rotateZ(0) translateZ(0)translateX(0)translateY(0);
            transition: 1s;
        }
        .div_4{
            background: url(timg4.jpg);
            border-radius: 20px;
            background-size: 600px 400px;
            transform-origin: right bottom;
            transform: rotateZ(6deg)translateZ(-60px) translateX(60px)translateY(-60px);
            
        }
        .div_4:hover{
            transform: rotateZ(0) translateZ(0)translateX(0)translateY(0);
            transition: 1s;
        }
        .div_5{
            background: url(timg5.jpg);
            border-radius: 20px;
            background-size: 600px 400px;
            transform-origin: right bottom;
            transform: rotateZ(8deg)translateZ(-80px) translateX(80px)translateY(-80px);
        }
        .div_5:hover{
            transform: rotateZ(0) translateZ(0)translateX(0)translateY(0);
            transition: 1s;
        }
        .div_6{
            background: url(timg3.jpg) no-repeat;
            border-radius: 20px;
            background-size: 600px 400px;
            transform-origin: right bottom;
            transform: rotateZ(10deg)translateZ(-100px) translateX(100px)translateY(-100px);
        }
        .div_6:hover{
            transform: rotateZ(0) translateZ(0)translateX(0)translateY(0);
            transition: 1s;
        }
    </style>
</head>

<body>
    <div>
        <div>
            <div class=" div_0 div_1"></div>
            <div class=" div_0 div_2"></div>
            <div class=" div_0 div_3"></div>
            <div class=" div_0 div_4"></div>
            <div class=" div_0 div_5"></div>
            <div class=" div_0 div_6"></div>
        </div>
    </div>
</body>

</html>
ログイン後にコピー

3. 平面星空

コードは以下の通りです:
(jsを使っていないので平面エフェクトのみです。
中心点をマスターすれば簡単です。回転) 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>太阳系</title>
<style>
    body {
        background: url(timg01.jpg) no-repeat;
        background-size: 100%;
    }

    .box1 {
        height: 600px;
        width: 600px;
        margin: 0 auto;
        border: 1px solid #ccc;
        border-radius: 50%;
    }

    .box1_0 {
        height: 100px;
        width: 100px;
        margin: 0 auto;
        border: 1px solid white;
        border-radius: 50%;
        position: absolute;
        top: calc(50% - 59px);
        left: 322px;
        transform-origin: 345.5px;
        animation: dong2 5s linear infinite 4s;
    }

    @keyframes dong2 {
        from {
            transform: rotate(0)
        }
        100% {
            transform: rotate(360deg);
        }
    }

    .box1_2 {
        height: 13px;
        width: 13px;
        margin: 0 auto;
        /* border: 1px solid #ccc; */
        border-radius: 50%;
        background: white;
        position: absolute;
        top: calc(50% - 7.5px);
        left: 96px;
        transform-origin: -45px;
        animation: dong3 5.5s linear infinite ;
        /* animation-iteration-count: 200; */
    }

    @keyframes dong3 {
        from {
            transform: rotate(0);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    .box1_1 {
        height: 15px;
        width: 15px;
        margin: 0 auto;
        /* border: 1px solid #ccc; */
        border-radius: 50%;
        background: rgb(7, 100, 223);
        position: absolute;
        top: 45px;
        left: calc(50% - 16.5px);
    }

    .box2 {
        height: 400px;
        width: 400px;
        margin: 0 auto;
        border: 1px solid #ccc;
        border-radius: 50%;
        position: absolute;
        top: calc(50% - 200px);
        left: calc(50% - 200px);
    }

    .box2_1 {
        height: 15px;
        width: 15px;
        margin: 0 auto;
        /* border: 1px solid #ccc; */
        border-radius: 50%;
        background: rgb(198, 208, 221);
        position: absolute;
        top: calc(50% - 7.5px);
        left: 43px;
        transform-origin: 157.5px;
        animation: dong1 5s linear infinite .5s;

    }

    @keyframes dong1 {
        from {
            transform: rotate(0)
        }
        100% {
            transform: rotate(360deg);
        }
    }

    .box2_2 {
        height: 15px;
        width: 15px;
        margin: 0 auto;
        border-radius: 50%;
        background: #644e11;
        position: absolute;
        top: calc(50% - 7.5px);
        left: -7px;
        transform-origin: 207.5px;
        animation: dong 5s linear infinite;
    }

    @keyframes dong {
        from {
            transform: rotate(0)
        }
        100% {
            transform: rotate(360deg);
        }
    }

    .box3 {
        height: 300px;
        width: 300px;
        margin: 0 auto;
        border: 1px solid #ccc;
        border-radius: 50%;
        position: absolute;
        top: calc(50% - 150px);
        left: calc(50% - 150px);
    }

    .box4 {
        height: 30px;
        width: 30px;
        margin: 0 auto;
        border-radius: 50%;
        background: orange;
        position: absolute;
        top: calc(50% - 15px);
        left: calc(50% - 15px);
    }
    .boxli{
        height: 900px;
        width: 900px;
        margin: 0 auto;
        border: 1px solid #ccc;
        border-radius: 50%;
       position: absolute;
       top:-120px;
       left:calc(50% - 450px);
        
    }
    .boxli_1{
        height: 15px;
        width: 15px;
        margin: 0 auto;
        border-radius: 50%;
        background: rgb(116, 100, 56);
        position: absolute;
        top:500px;
       left:-6px;
       transform-origin: 455.5px -38px;
        animation: dongli 5s linear infinite;
    }
    @keyframes dongli {
        from {
            transform: rotate(0)
        }
        100% {
            transform: rotate(360deg);
        }
    }
</style>
</head>
<body>
    <div class="box1">
        <div class="box1_0">
            <div class="box1_2"></div>
            <div class="box1_1"></div>
        </div>
        <div class="box2">
            <div class="box2_1"></div>
            <div class="box2_2"></div>
            <div class="box3">
                <div class="box4"></div>
            </div>
        </div>
    </div>
    <div class="boxli">
        <div class="boxli_1"></div>
</div>
</body>
</html>
ログイン後にコピー

関連する推奨事項:

CSS でカード画像の反転効果を実現するにはどうすればよいですか? (特殊効果の例)

css3D+ アニメーションの例 (完全なコード付き)

以上が3Dを実現するピュアCSSコード（立方体、ダイナミックな立体写真集、平面的な星空）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
纯CSS实现3D
ソース：php.cn
前の記事：CSSを使って文字枠の点線スタイルを書くにはどうすればいいですか？ （例） 次の記事：純粋な CSS を使用して DOM 要素を使用せずにアニメーション効果を実現する方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
SCSSを使用してデフォルト値とCSS変数を生成する ウェブサイトのスタイリングを実装しています。レガシー サポートの理由から、少なくともしばらくの間は IE11 をサポートする必要があります。ワークフローと私の健全性の理由から、私は...
から 2024-04-06 17:46:54
0
1
355
ナビゲーションバーの下枠のCSS ナビゲーション バーがあり、リスト内の項目にカーソルを置くと下部に赤い線を追加しましたが、その赤い線をタイトル (例: 「サービス」) の下に移動したいのですが、これを実現する方法...
から 2024-04-06 15:04:41
0
2
347
CollapseDisplay クラスを使用してブートストラップ アコーディオン ヘッダーの外観をカスタマイズする class Collapseshow を使用してパネルのカード タイトルのスタイルを設定したいと考えています。この例では、最初のパネルです。 CSS を使用して .accordio...
から 2024-04-06 12:53:11
0
1
376
表セルのコンテナが親セルの高さ全体を占めるようにしてください。 Flexboxを使用せずにコンテンツを垂直方向に整列させようとしています。このユースケースにはいくつかの問題があるため、垂直方向に整列されたテーブルでそれを行おうとしていますが、問...
から 2024-04-04 16:03:18
0
1
404
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート