CSS3 で 3D アニメーションを作成する方法 - サイコロの回転を例にして、CSS3 アニメーションのプロパティをdetail_html/css

CSS3 で 3D アニメーションを作成する方法 - サイコロの回転を例にして、CSS3 アニメーションのプロパティをdetail_html/css_WEB-ITnose で説明します。

WBOY

リリース： 2016-06-24 11:16:35

オリジナル

1569 人が閲覧しました

まず、css3 で実現される 2 つの素晴らしい 3D アニメーション効果を見てみましょう

あなたはしませんでした読み方が間違っています。このクールな効果はすべて css3 を使用して実現されています。

以下は、アニメーションの実装に必要ないくつかの CSS3 プロパティです。

1. 視点: 3D シーンを実現するために使用されます

3D エフェクトを作成する最初のステップは、3D シーンを作成すること、つまり、エフェクトを実現するモジュールを要求することです。ここでは、perspective属性とperspective-origin属性を使用します。

パースペクティブ: ブラウザから 3D アニメーションまでの距離を定義するために使用されます。単位は (px) です。

perspective-origin: エフェクトレンダリングのパースペクティブはブラウザに画角を伝えます。通常は中心または 50% 50% (中心を意味します) です。

transform-style:preserve-3d は、今後実行される変換操作がすべて 3D ワールド上で実行されることをブラウザーに伝えます。

2. トランジション: アニメーションのトランジション効果を記述するために使用されます

トランジションは、アニメーションが硬くなりすぎないようにトランジション効果を実現するために使用されます。これは複合プロパティであり、次のプロパティがあります:

transition-property: 過剰または動的にシミュレートされた CSS プロパティ: 対応するプロパティ: width (幅)、height (高さ)、border (境界線)、絶対位置 Top、bottom。、左右の値、外側のマージン（margin）、内側のマージン（padding）、テキストシャドウ（text-shadow）、z-indexなど。

transition-duration: 遷移が完了するまでに必要な時間

transition-timing-function: 遷移関数を指定します。関数には、イーズ (デフォルト値、高速から低速への速度、主観的な減速)、リニア (均一な速度)、 easy-in (速度がどんどん速くなっていき、スピードアップ、フェードアウト効果)、ease-out (速度がどんどん遅くなっていき、減速、フェードアウト効果)、ease-in out (最初に加速し、次に加速します)スローダウン、フェードアウト効果)

transition-delay: トランジション効果が発生し始める遅延時間、つまりトランジション効果が実行され始める時間を指定します。

3. 変換: 反転と角度変換を実現するために使用されます

transform は、さまざまな変換効果を実現するために使用される複合属性でもあり、次の属性があります:

translate(x,y) は 2D 変換を定義します。

translate3d(x,y,z) は 3D 変換を定義します。

translateX/Y/Z は変換を定義します。デシベルは X、Y、Z 軸の値を使用します。

scale(x,y) は 2D スケーリング変換を定義します。

scale3d(x,y,z) は 3D スケーリング変換を定義します。

scaleX/Y/Z は、X、Y、Z 軸の値を設定することでスケーリング変換を定義します。Z 軸の場合は 3D 回転を定義します。

rotate(angle) は 2D 回転を定義し、パラメータで角度を指定します。

rotate3d(x,y,z,angle) は 3D 回転を定義します。

skew(x-angle,y-angle) は、X 軸と Y 軸に沿った 2D スキュー変換を定義します。

skewX/Y は、X、Y 軸に沿った 2D スキュー変換を定義します。

perspective(n) は 3D 変換要素のパースビューを定義します

簡単なサイコロの書き方は次のとおりです

1 3D シーンを作成します

ここでは、perspective とperspective-origin の 2 つの属性が使用されます。 3Dアニメーションの定義距離は800pxで、中央に表示されます。これら 2 つの属性の正確な意味を確認するために、MOOC.com からの写真を次に示します。

3D シーンで dice というクラス名を持つ div を定義しました。これは、サイコロを記述する外側のレイヤーでラップされた div です。その幅と高さを定義して中央に配置します。

サイコロの 6 つの面を実装するために 6 つの div を使用します (他のブロックレベルの要素も使用できます)。ここでは、相対的な位置決めとして .dice を定義します。

以降の変換操作が 3D ワールドで実行されることをブラウザーに伝えるために、サイコロをラップする div にスタイルtransform-style:preserve-3dを追加しました。

<!DOCTYPE html><html><head>    <meta charset="UTF-8" />    <title>实现一个3D骰子</title>    <style>    *{        padding: 0;        margin: 0;            }    .block{        border: 1px solid #000;         padding: 100px 0;        -webkit-perspective: 800px;           -moz-perspective: 800px;                perspective: 800px;        -webkit-perspective-orign: 50% 50%;           -moz-perspective-orign: 50% 50%;                perspective-orign: 50% 50%;    }    .dice{        width: 300px;        height: 300px;        margin: 20px auto;        position: relative;        -webkit-transform-style: preserve-3d;           -moz-transform-style: preserve-3d;                transform-style: preserve-3d;    }    <style></head><body>    <div class="block">        <div class="dice">        </div>    </div></body></html>

ログイン後にコピー

2. シーンが設定されたので、6 つの同じ div のサイコロの 6 つの面を書きましょう

<div class="block">    <div class="dice">        <div class="page" id="page1">1</div>        <div class="page" id="page2">2</div>        <div class="page" id="page3">3</div>        <div class="page" id="page4">4</div>        <div class="page" id="page5">5</div>        <div class="page" id="page6">6</div>    </div></div>

ログイン後にコピー

共通のスタイルを定義します。

りー

これ以下に示すように、6 つの重複した div を持つブロックが表示されます。

以下は、立方体構造を実現するための重要なステップです。

3. サイコロの 6 つの面の位置を定義します

.page{    width: 200px;    height: 200px;    background: rgba(0,0,0,0.3);    position: absolute;    font-size: 200px;    color: #fff;    line-height: 200px;    text-align: center;    border: 1px solid red;}

ログイン後にコピー

ここでは、transform の 2 つのプロパティ、回転と原点を使用します。前者は回転角度を定義し、後者は軸を定義します。回転。

按照上述代码来写，我们现在已经可以看见一个正方体了，如图：

现在已经实现了一大部分代码的书写了，我们已经写出了一个静态的正方体，接下来让他实现一个转起来的动画就可以了。

下面是动画的部分，实现让这个正方体以随机的角度转动起来。　

用css3来书写动画

css3里面另一强大的属性就是动画的实现，省去了很多的js代码的计算一级各种动画效果的考虑，拥有css3神器，就可以写出各种炫酷的效果来，赶紧来看看怎么实现。

1、如何旋转

上面我们讲过了他过transform的rotate属性来实现旋转，我们通过对每个面的旋转实现了一个正方体的样子，这里我们把正方体作为一个整体，来实现一整个正方体的旋转。

2、定义动画：

css3 里面写动画分为两步，第一步就是来定义一个动画。通过 @keyframes 来实现。

语法如下：

@keyframes animationname {keyframes-selector {css-styles;}}

ログイン後にコピー

animationname：动画的名字（尽量语意化）

keyframes-selector：动画时长的百分比。0%-100%（或from、to）

css-styles：一个或多个合法的 CSS 样式属性

我们这里歹意一个名为 random-rotate 的动画，通过transform的rotate属性来实现旋转。代码如下：

@-webkit-keyframes random-rotate{    0%{        -webkit-transform:rotateX(0deg) rotateY(0deg);           -moz-transform:rotateX(0deg) rotateY(0deg);             -o-transform:rotateX(0deg) rotateY(0deg);                transform:rotateX(0deg) rotateY(0deg);    }    100%{        -webkit-transform:rotateX(360deg) rotateY(360deg);           -moz-transform:rotateX(360deg) rotateY(360deg);             -o-transform:rotateX(360deg) rotateY(360deg);                transform:rotateX(360deg) rotateY(360deg);    }}@-moz-keyframes random-rotate{    0%{        -webkit-transform:rotateX(0deg) rotateY(0deg);           -moz-transform:rotateX(0deg) rotateY(0deg);             -o-transform:rotateX(0deg) rotateY(0deg);                transform:rotateX(0deg) rotateY(0deg);    }    100%{        -webkit-transform:rotateX(360deg) rotateY(360deg);           -moz-transform:rotateX(360deg) rotateY(360deg);             -o-transform:rotateX(360deg) rotateY(360deg);                transform:rotateX(360deg) rotateY(360deg);    }}@-o-keyframes random-rotate{     0%{        -webkit-transform:rotateX(0deg) rotateY(0deg);           -moz-transform:rotateX(0deg) rotateY(0deg);             -o-transform:rotateX(0deg) rotateY(0deg);                transform:rotateX(0deg) rotateY(0deg);    }    100%{        -webkit-transform:rotateX(360deg) rotateY(360deg);           -moz-transform:rotateX(360deg) rotateY(360deg);             -o-transform:rotateX(360deg) rotateY(360deg);                transform:rotateX(360deg) rotateY(360deg);    }}@keyframes random-rotate{     0%{        -webkit-transform:rotateX(0deg) rotateY(0deg);           -moz-transform:rotateX(0deg) rotateY(0deg);             -o-transform:rotateX(0deg) rotateY(0deg);                transform:rotateX(0deg) rotateY(0deg);    }    100%{        -webkit-transform:rotateX(360deg) rotateY(360deg);           -moz-transform:rotateX(360deg) rotateY(360deg);             -o-transform:rotateX(360deg) rotateY(360deg);                transform:rotateX(360deg) rotateY(360deg);    }}

ログイン後にコピー

这里我们要这个动画x、y轴分别从0度转到 360度。

3、动画的实现

css3 里面的animation 配合 @keyframe 来实现。 animation 是一个复合属性，同样我们来看下这个复合属性的各个属性是如何定义的。

animation-name：动画的名字（@keyframe 定义好的）

animation-duration：动画执行一次的时间

animation-timing-function：动画的速度曲线（ease、linear等，等同于transform的速度曲线用法）

animation-delay：动画的延时时间

animation-interation-count：动画播放的次数（数字/infinite 无限次）

animation-direction：动画播放的方向（normal 正常/alternate 反向）

animation-play-state：动画播放状态（running 播放/paused 暂停）

animation-fill-mode：动画在开始和结束后发生的操作

下面来写下代码，我们这里让这个正方体无限转动，每次动画的时间为5s，速度为匀速，动画不延时。同时我们给动画添加一个过度的效果，使动画看起来更平滑。

外层div样式改为如下：

.dice{    width: 300px;    height: 300px;    margin: 20px auto;    position: relative;    -webkit-transform-style: preserve-3d;       -moz-transform-style: preserve-3d;                transform-style: preserve-3d;    -webkit-animation: random-rotate 5s linear 0s infinite;       -moz-animation: random-rotate 5s linear 0s infinite;        -ms-animation: random-rotate 5s linear 0s infinite;         -o-animation: random-rotate 5s linear 0s infinite;              animation: random-rotate 5s linear 0s infinite;    -webkit-transition: all 1s ease;       -moz-transition: all 1s ease;        -ms-transition: all 1s ease;         -o-transition: all 1s ease;            transition: all 1s ease;}

ログイン後にコピー

至此，我们已经完整的实现了一个正方体（类似于一个骰子）的旋转，有几点需要注意的提示如下：

1、由于个浏览器对css3的实现不同，记得加浏览器前缀名

2、css3动画确实很炫，但还是要根据项目的不同来进行取舍

3、css3可以实现的动画还很多，大家可以多开开脑洞，来实现属于你的css3动画

4、每个动画有自己的用途，使用时不要混淆