検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSを使用して3Dアニメーション特殊効果を実装するコード例

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

不言
不言オリジナル
2018-08-13 15:29:524243ブラウズ

この記事の内容は 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 までご連絡ください。
前の記事：CSS セレクターの優先順位はどのように決定されますか?次の記事：CSS セレクターの優先順位はどのように決定されますか?

関連記事

続きを見る