コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
目次
1.1.1
Perspective: 遠近距離、単位ピクセル(値が小さいほど、遠近距離が近くなり、効果がより明白になります): 親を設定します要素上で
ホームページ ウェブフロントエンド CSSチュートリアル CSSを使用して3Dアニメーション特殊効果を実装するコード例

CSSを使用して3Dアニメーション特殊効果を実装するコード例

不言
不言
Aug 13, 2018 pm 03:29 PM
css html

この記事の内容は CSS で 3D アニメーションの特殊効果を実現するためのコード例です。必要な方は参考にしていただければ幸いです。

まずレンダリングを見てみましょう

1.1.1

CSSを使用して3Dアニメーション特殊効果を実装するコード例

Perspective: 遠近距離、単位ピクセル(値が小さいほど、遠近距離が近くなり、効果がより明白になります): 親を設定します要素上で

perspective-origin: 遠近点の位置を設定します

transform-style: 要素の子要素が 3 次元空間に配置されることを指定します。値: plain-3d

1.1 .1 アイデア

（1）pが3つあるので、それらをまとめて箱に入れます。 

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

(2) ボックスのスタイルを設定

.cube{
        width: 200px;
        height: 300px;
        transform-style: preserve-3d;
        margin:100px auto;
       
        position: relative;
        transform: rotateX(30deg);
        border-radius: 50%;
            padding: 60px;
    }
ログイン後にコピー

(3) 各pのスタイルを設定

 .mian{
        width: 200px;
        height: 300px;
        background-image: url(1.jpg);
        background-position:400px 0;
        position: absolute;
        background: url(aka.jpg);
        border: 1px solid #ccc;
        transition: 2s;
    }
    /* .mian1:hover{
        transform-origin: right;
        transform: rotateY(-60deg);
    } */
    .mian1{
        transform-origin: right;
        transform: translateX(-200px) rotateY(45deg);
        background-position:0 0;
    }

    .mian2{
        background-position: 400px 0;
    }

    .mian3{
        transform-origin: left;
        transform: translateX(200px) rotateY(45deg);
        background-position: 200px 0;
    }
ログイン後にコピー

(4) アニメーションを設定

 .mian3:hover{
        transform: translateX(200px) rotateY(0deg);
    } 
    .mian1:hover{
        transform: translateX(-200px) rotateY(0deg);
    }
ログイン後にコピー

1.1.1 ソースコード: 

nbsp;html>


    <meta>
    <meta>
    <meta>
    <title>书页</title>
    <style>
        .container{
            width: 1000px;
            height: 650px;
     
            perspective: 2000px;
            border: 1px solid transparent;
            overflow: hidden;
            margin: 0 auto;
            perspective-origin: 10% 20%;
           
        }
    
        .cube{
            width: 200px;
            height: 300px;
            transform-style: preserve-3d;
            margin:100px auto;
           
            position: relative;
            transform: rotateX(30deg);
            border-radius: 50%;
            padding: 60px;
        }
        .mian{
            width: 200px;
            height: 300px;
            background-image: url(1.jpg);
            background-position:400px 0;
            position: absolute;
            background: url(aka.jpg);
            border: 1px solid #ccc;
            transition: 2s;
        }
        /* .mian1:hover{
            transform-origin: right;
            transform: rotateY(-60deg);
        } */
        .mian1{
            transform-origin: right;
            transform: translateX(-200px) rotateY(45deg);
            background-position:0 0;
        }

        .mian2{
            background-position: 400px 0;
        }

        .mian3{
            transform-origin: left;
            transform: translateX(200px) rotateY(45deg);
            background-position: 200px 0;
        }
        .mian3:hover{
            transform: translateX(200px) rotateY(0deg);
        } 
        .mian1:hover{
            transform: translateX(-200px) rotateY(0deg);
        }
    </style>


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

CSSを使用して3Dアニメーション特殊効果を実装するコード例

1.1.2 アイデア:

(1) p が 5 つあり、それぞれに 5 つの単語を入れます。 

  <p>
        </p><p>前</p>
        <p>端</p>
        <p>小</p>
        <p>学</p>
        <p>生</p>
    
ログイン後にコピー

(2) boxとp全体のスタイルを設定

 #box{
        margin: 100px auto;
        font-size: 100px;
        color:#005aa0;
        text-align: center;
    }
 .ze1,.ze2,.ze3,.ze4,.ze5{
        display: inline-block;
        width: 90px;
        height: 100%;
        position: relative;
    }
ログイン後にコピー

(3) 前後の擬似要素を設定

  .ze1:before,.ze2:before,.ze3:before,.ze4:before,.ze5:before{
        content:attr(data);
        position: absolute;
        color: #ffffff;
        top:0;
        left: 2px;
        transform-origin: left;
        transition: transform .5s;
    }
    .ze1:before{
        content: "前";
    }
    .ze2:before{
        content: "端";
    }
    .ze3:before{
        content: "小";
    }
    .ze4:before{
        content: "学";
    }
    .ze5:before{
        content: "生";
    }
    .ze1:after,.ze2:after,.ze3:after,.ze4:after,.ze5:after {
        position: absolute;
        color: #b3b3b3;
        top:3px;
        left: 10px;
        z-index: -1;
        transform-origin: left;
        transition: transform .5s;
    }
    .ze1:after{
        content: "前";
    }
    .ze2:after{
        content: "端";
    }
    .ze3:after{
        content: "小";
    }
    .ze4:after{
        content: "学";
    }
    .ze5:after{
        content: "生";
    }
ログイン後にコピー

(4) アニメーションを設定

.ze1:hover:before,.ze2:hover:before,.ze3:hover:before,.ze4:hover:before,.ze5:hover:before{
        transform: rotateY(-40deg) skewY(10deg);
    }
    .ze1:hover:after,.ze2:hover:after,.ze3:hover:after,.ze4:hover:after,.ze5:hover:after{
        transform: rotateY(40deg) skewY(10deg);
    }
ログイン後にコピー

1.1.2ソースコード: 

nbsp;html>


    
    动态字
    


    <p>
        </p><p>前</p>
        <p>端</p>
        <p>小</p>
        <p>学</p>
        <p>生</p>
    
ログイン後にコピー

1.1.3 アイデアは書かず、ソースコードのみを書いてください

1.1.3 ソースコード: 

  nbsp;html>


    <meta>
    <meta>
    <meta>
    <title>3d动画</title>
   
    <style>
    body{
    margin: 0;   
    background:url(iom.jpg) ; 
    background-size:100%;
    position: relative;
}

.box{
    width:430px;
    height: 430px;
    position: absolute;;
    top:100px;
    left: 480px;
    border: 1px solid #ccc;
    border-radius: 215px;
    text-align: center;
    animation: dong 20s infinite linear;
   
}

.ai{
    width:10px;
    height: 10px;
    background: #0c0;
    border-radius: 5px;
    position: absolute;
    right:38px;
    top: 340px;
}

@keyframes dong{
    0%{
        transform:rotate(0deg)
    }

    100%{
        transform:rotate(720deg)
    }
}


.mrin{
    width:320px;
    height: 320px;
    border:1px solid #ccc;
    border-radius: 180px;
    position: absolute;
    top:155px;
    left: 535px; 
    animation: mi 15s infinite linear;
}

.ak{
    width:50px;
    height: 50px;
    border: 1px solid #ccc;
    margin: 20px 0 0 20px;
    border-radius: 25px;
    display: inline-block;
    animation: ol 5s infinite linear;
}

.ak .sj1{
    width:10px;
    height:10px;
    border-radius: 5px;
    margin:20px 0 0 20px;
    background: blue;
}

.ak .sj2{
    width: 10px;
    height: 10px;
    margin-top:5px;
    background: #fff;
    border-radius: 5px;
}


@keyframes mi{
    0%{
        transform:rotate(0deg)
    }

    100%{
        transform:rotate(720deg)
    }
}



@keyframes ol{
    0%{
        transform:rotate(0deg)
    }

    100%{
        transform:rotate(720deg)
    }
}


.mian{
    width: 240px;
    height: 240px;
    border:1px solid #ccc;
    position: absolute;
    border-radius: 120px;
    top:195px;
    left:575px;
    animation: af 5s infinite linear;
}


.mian .ap{
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: #f0f;
    margin:30px 0 0 30px; 

}


@keyframes af{
    0%{
        transform:rotate(0deg)
    }

    100%{
        transform:rotate(720deg)
    }
}


.chen{
    width: 160px;
    height: 160px;
    border: 1px solid #ccc;
    position: absolute;
    border-radius: 80px;
    top:235px;
    left:615px;
    animation: oa 4s infinite linear;
}


.ze{
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: #0c0;
    margin: 20px 0 0 15px;
}


@keyframes oa{
    0%{
        transform:rotate(0deg)
    }

    100%{
        transform:rotate(720deg)
    }
}

.yu{
    width: 80px;
    height: 80px;
    background-color:darkorange;
    border-radius: 40px;
    position: absolute;
    top:275px;
    left:655px;
    opacity: .7;
}
    
    </style>


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


.ak .sj2{
    width: 10px;
    height: 10px;
    margin-top:5px;
    background: #fff;
    border-radius: 5px;
}


@keyframes mi{
    0%{
        transform:rotate(0deg)
    }

    100%{
        transform:rotate(720deg)
    }
}



@keyframes ol{
    0%{
        transform:rotate(0deg)
    }

    100%{
        transform:rotate(720deg)
    }
}


.mian{
    width: 240px;
    height: 240px;
    border:1px solid #ccc;
    position: absolute;
    border-radius: 120px;
    top:195px;
    left:575px;
    animation: af 5s infinite linear;
}


.mian .ap{
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: #f0f;
    margin:30px 0 0 30px; 

}


@keyframes af{
    0%{
        transform:rotate(0deg)
    }

    100%{
        transform:rotate(720deg)
    }
}


.chen{
    width: 160px;
    height: 160px;
    border: 1px solid #ccc;
    position: absolute;
    border-radius: 80px;
    top:235px;
    left:615px;
    animation: oa 4s infinite linear;
}


.ze{
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: #0c0;
    margin: 20px 0 0 15px;
}


@keyframes oa{
    0%{
        transform:rotate(0deg)
    }

    100%{
        transform:rotate(720deg)
    }
}

.yu{
    width: 80px;
    height: 80px;
    background-color:darkorange;
    border-radius: 40px;
    position: absolute;
    top:275px;
    left:655px;
    opacity: .7;
}
    
    


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

以上がCSSを使用して3Dアニメーション特殊効果を実装するコード例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホット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衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

もっと見る

人気の記事

<🎜>：庭を育てる - 完全な突然変異ガイド
3週間前 By DDD
<🎜>：バブルガムシミュレーターインフィニティ - ロイヤルキーの取得と使用方法
3週間前 By 尊渡假赌尊渡假赌尊渡假赌
KB5055612を修正する方法Windows 10にインストールできませんか？
3週間前 By DDD
Nordhold：Fusion System、説明
3週間前 By 尊渡假赌尊渡假赌尊渡假赌
マンドラゴラ：魔女の木のささやき - グラップリングフックのロックを解除する方法
3週間前 By 尊渡假赌尊渡假赌尊渡假赌
もっと見る

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Java チュートリアル
1665
14
CakePHP チュートリアル
1423
52
Laravel チュートリアル
1321
25
PHP チュートリアル
1269
29
C# チュートリアル
1249
24
もっと見る
Related knowledge
VueでBootstrapの使用方法 VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。

HTML、CSS、およびJavaScriptの理解：初心者向けガイド HTML、CSS、およびJavaScriptの理解：初心者向けガイド Apr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTML、CSS、およびJavaScriptの役割：コアの責任 HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLにおけるReactの役割：ユーザーエクスペリエンスの向上 HTMLにおけるReactの役割：ユーザーエクスペリエンスの向上 Apr 09, 2025 am 12:11 AM

ReactはJSXとHTMLを組み合わせてユーザーエクスペリエンスを向上させます。 1）JSXはHTMLを埋め込み、開発をより直感的にします。 2）仮想DOMメカニズムは、パフォーマンスを最適化し、DOM操作を削減します。 3）保守性を向上させるコンポーネントベースの管理UI。 4）国家管理とイベント処理は、インタラクティブ性を高めます。

ブートストラップに写真を挿入する方法 ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

HTML：構造、CSS：スタイル、JavaScript：動作 HTML：構造、CSS：スタイル、JavaScript：動作 Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来：ウェブデザインの進化とトレンド HTMLの未来：ウェブデザインの進化とトレンド Apr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

クラフトCMSのキャッシングの問題を解決する：Wiejeben/Craft-Laravel-Mixプラグインの使用 クラフトCMSのキャッシングの問題を解決する：Wiejeben/Craft-Laravel-Mixプラグインの使用 Apr 18, 2025 am 09:24 AM

CraftCMSを使用してWebサイトを開発する場合、特にCSSやJavaScriptファイルを頻繁に更新する場合、リソースファイルのキャッシュ問題が発生することがよくあります。古いバージョンのファイルがブラウザによってキャッシュされ、ユーザーが最新の変更を表示しないようにすることがあります。この問題は、ユーザーエクスペリエンスに影響を与えるだけでなく、開発とデバッグの難しさを高めます。最近、プロジェクトで同様のトラブルに遭遇し、いくつかの調査の後、プラグインWiejeben/Craft-Laravel-Mixが見つかりました。

See all articles