ホームページ >ウェブフロントエンド >CSSチュートリアル >css3を使用して走馬灯効果を実現します

css3を使用して走馬灯効果を実現します

不言オリジナル: 2018-06-22 13:05:482692ブラウズ

この記事では主に、回転ドア効果を実現するための純粋な CSS3 を紹介します。使用される主な CSS3 テクノロジーは次のとおりです: キーフレーム、パースペクティブ、パースペクティブ原点、トランスフォーム (移動、回転)、アニメーション、トランスフォーム原点です。

純粋な CSS3 は、正六角形の回転ドア効果を実装します。 CSS3 アニメーションの学習状況を記録します。

使用される主な CSS3 テクノロジーは次のとおりです: キーフレーム、パースペクティブ、パースペクティブ原点、変換 (変換、回転)。 ) )、アニメーション、変形原点、および平面ジオメトリの少しの知識 (間隔、角度の計算など) の詳細なプロセスは次のとおりです:

最初に表示するレイアウト (上面図)、垂直線をデザインします。途中に補助線があり、オフセットを計算します移動するときに使用する必要があるもの:

赤枠は回転面です (つまり、走馬灯効果の構造は最終的に面の中点で回転します)を回転軸として）、6 つの面もこの面に基づいて配置されます。まず、左側の面は、最初は青い線にあり、回転によって緑色の線に到達します。右側についても同様です。の構造を実現するには、3 辺の長さの半分だけ中央の面を Z 軸方向に移動するだけで十分です。上の図のように、パターンのあるサーフェス (この例ではテキストが使用されています。考え方は同じです) は外側を向く必要があることに注意してください。中央のサーフェスは中点を基準にして 180 度回転する必要があります。 Z 軸を 2/2 根と 3 辺の長さだけ外側にオフセットした後の円の中心は、すべてのサーフェスに同じ方法で簡単にアクセスできます。このプロセス中に覚えておく必要があるテクニックの 1 つは次のとおりです。3 次元座標系では、座標原点から開始して座標軸の正の方向に見ると、rotate(X/Y/Z) の値は次のようになります。反時計回りに回転する場合は正の数。回転する場合、rotate(X/Y/Z) の値は負の値になります。

構造を設定します: 3D シーン、回転ランタンの回転面、および回転ランタンの 6 つの側面:

<p class="wapper">        <!--场景-->
    <p class="rotate">   <!--容器-->
        <p class="item itemOne">1</p>  <!--六个面-->
        <p class="item itemTwo">2</p>
        <p class="item itemThree">3</p>
        <p class="item itemFour">4</p>
        <p class="item itemFive">5</p>
        <p class="item itemSix">6</p>
    </p>        
</p>

3D シーンを設定します:

.wapper{
    -webkit-perspective:800;    /*观察距离800*/
    -webkit-perspective-origin:50% -100%;    /*从正前方上方斜向下观察*/
    width:400px;
    height:300px;
    margin:100px auto;
}

回転面を設定します:

@-webkit-keyframes rotation{      /*动画过程*/
    0%{-webkit-transform:rotateY(0deg);}    
    100%{-webkit-transform:rotateY(-360deg);}
}
.rotate{
    -webkit-transform-style:preserve-3d;     /*3D变换*/
    -webkit-animation: rotation 6s infinite;  /*动画名称、时间、循环动画*/
    -webkit-animation-timing-function: linear;  /*匀速动画*/
    -webkit-transform-origin:center;      /*沿中间旋转*/
    width:100%;
    height:100%;
    position:relative;   /*相对定位布局*/
}

位置を除く 6 つの面設定:

.item{
   -webkit-transform-origin:center;  /*均沿中心旋转*/
   width:198px;
   height:300px;
   position:absolute;   /*绝对定位在旋转面上*/
   background:none;
   text-align:center;
   line-height:300px;
}

1 番の面 (上の構造図の赤枠の下の左側の緑の線でマークされた面) を例に、6 つの面の位置をそれぞれ設定し、すべて値はジオメトリを通じて計算する必要があります:

.itemOne{
    left:-50px;
    -webkit-transform:translateZ(87px) rotateY(-60deg);  /*z轴向外移动87px，沿Y轴方向旋转-60°*/
    background:#f00;
}

マウスをクリックします構造上にホバーするとアニメーションが停止します:

.rotate:hover{
    -webkit-animation-play-state:paused;  /*设置动画状态*/
}

この例は、Webkit コアを備えたブラウザでのみ表示できます。他の最新のブラウザと互換性がある場合は、-moz- などの接頭辞を追加する必要があります。完全なコードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Animation Test</title>
    <style>
    *{margin:0;padding:0;}
    @-webkit-keyframes rotation{    
        0%{-webkit-transform:rotateY(0deg);}    
        100%{-webkit-transform:rotateY(-360deg);}
    }
    .wapper{
        -webkit-perspective:800;
        -webkit-perspective-origin:50% -100%;
        width:400px;
        height:300px;
        margin:100px auto;
    }
    .rotate{
        -webkit-transform-style:preserve-3d;
        -webkit-animation: rotation 6s infinite;
        -webkit-animation-timing-function: linear;
        -webkit-transform-origin:center;
        width:100%;
        height:100%;
        position:relative;
    }
    .item{
        -webkit-transform-origin:center;
        width:198px;
        height:300px;
        position:absolute;
        background:none;
        text-align:center;
        line-height:300px;
    }
    .itemOne{
        left:-50px;
        -webkit-transform:translateZ(87px) rotateY(-60deg);
        background:#f00;
    }
    .itemTwo{
        left:100px;
        -webkit-transform:translateZ(173px);
        background:#ff0;
    }
    .itemThree{
        left:250px;
        -webkit-transform:translateZ(87px) rotateY(60deg);
        background:#0ff;        
    }
    .itemFour{
        left:250px;
        -webkit-transform:translateZ(-87px) rotateY(120deg);    
        background:#0f0;
    }
    .itemFive{
        left:100px;
        -webkit-transform:translateZ(-173px) rotateY(180deg);
        background:#0ff;
    }
    .itemSix{
        left:-50px;
        -webkit-transform:translateZ(-87px) rotateY(-120deg);
        background:#00f;
    }
    .rotate:hover{
        -webkit-animation-play-state:paused;
    }
    </style>
</head>
<body>
    <p class="wapper">
        <p class="rotate">
            <p class="item itemOne">1</p>
            <p class="item itemTwo">2</p>
            <p class="item itemThree">3</p>
            <p class="item itemFour">4</p>
            <p class="item itemFive">5</p>
            <p class="item itemSix">6</p>
        </p>        
    </p>
</body>
</html>

はい、とても素晴らしい効果ではないでしょうか。CSS3 は本当に良いもので、それに値します。それ。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

css3を使用して走馬灯効果を実現します

関連記事