css3 回転ドア効果_html/css_WEB-ITnose

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

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

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

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

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

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

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;}

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 - とその他の接頭辞を追加する必要があります。完全なコードは次のとおりです。