CSS 変換 変換とアニメーション anime_html/css_WEB-ITnose

Transform

Web ページを作成するとき、主に 2 次元空間を操作しますが、位置を絶対的に配置する場合、Z 軸が開くと理解できますか?新しい空間次元が追加されますが、これは単なる階層化にすぎません。CSS には、Transform というより強力な属性があります。

Transform は文字通りの意味から「変化」を意味することがわかり、その値には主に

• rotate 回転

• 歪みスキュー

• スケールスケール

• 移動平行移動

• 行列変形行列

回転を例に挙げます。

3D Transform での回転には、rotateX(angle) X 軸回転、rotateY(angle) Y 軸回転、rotateZ( の 3 つの方法があります。角度) Z 軸の回転 🎜>XYZ は平面の回転軸を表し、中の値はその角度を表します。

幾何学的に見てください。これではまだ 3D については言及されていませんが、

次に、非常に重要な属性であるパー​​スペクティブ属性について説明します。

この属性は、上記の回転アニメーションを含めて、遠近法を意味します。遠近法属性が存在しない場合、表示されるものはもはや遠近法ではありません。長方形の回転と同じですが、

perspective の後の値は数値であり、

transform 属性とパースペクティブを関数値として使用します:

• または、パースペクティブ属性を直接使用します:

transform: perspective(800);

パースペクティブは、キャンバス (親要素) 上に記述することも、キャンバス上にバリアントが 1 つしかない場合は要素自体に直接記述することもできますが、複数のバリアントがある場合はほとんど違いはありません。この図のように、黄色の部分ではパースがカラー ブロックに直接書き込まれ、紫色の部分ではパースが親コンテナに書き込まれます。キャンバスをパース要素として使用しているため、サブ要素の形状が異なります。

• パースペクティブの値が 3D 変形効果の強さを決定します。距離が遠いほど、遠くにあるキューブ (ルービック キューブなど) が回転するのと同じように、その視覚効果は比較的弱くなります。あなたの目、その効果はより強力です。

ここでは、新しい Transform パラメーター、translateZ を使用します。

perspective: 800;

RotateZ を使用すると、すでに Z 軸を見つけることができ、translateZ を使用して Z 軸の座標を処理できます。要素が目の前に近くまたは遠くに見えるようにします。その値は、親要素のパースペクティブ値に基づきます。

たとえば、親要素のパースペクティブ値が 800 の場合、子要素の translationZ の値が小さいほど、子要素は遠くにあり、小さく見えます。子要素のtranslateZが800に近いが800未満（790+など）の場合、要素は画面全体に表示されます（ブラウザを超えることに注意してください）。これは、要素が次の場所に到着したことを意味するためです。目の前に小さな葉があり、その後ろにもすべてを覆うことができます。子要素の数が 800 を超えると、その要素が目の奥に到達し、頭の後ろにあるものが見えなくなり、要素が消えてしまいます。

ps: 上の 3 つの平面回転の図では、Y 軸または Y 軸が 90 度回転するとグラフィックが消えていることがわかります。これは、90 度で平面が接触しているためです。視線が平行だと面に厚みがないので消えてしまいます。角度が大きくなると再び現れますが、これを視覚的な死角と呼びます。

perspective-origin 属性

パースペクティブについて簡単に理解した後、パースペクティブの原点である Perspective-origin 属性を見てみましょう。
この属性は理解するのが簡単です。フラッシュを使用できる場合、パースペクティブ原点は、アニメーション化するときにこの配置ポイントを中心に回転します。 . スピンとか。 CSS3 のデフォルトの視点原点は要素の中心です。

transform-style アトリビュート

パースペクティブとトランスフォームを設定したら、transform-style アトリビュートを使用します。このアトリビュートには、 flat と prepare-3d という 2 つのパラメータがあります。 flat はデフォルト値で、平面を示します。後者、preserve-3d は 3D パースペクティブを示します。

これは 3D 空間を開くためのメソッドであることを簡単に理解できます:

transform-style:preserve-3d;
この属性は、使用しない限り画像に影響を与えません。フラット。

3D 世界には、オブジェクトが透明でない限り、オブジェクトを通してその背後にあるオブジェクトを見ることができないというもう 1 つの原則があります。ここでは属性 backface-visibility を使用します。その値が hidden の場合、それは通常の 3D です。世界。

Animation

现在简单的几何原理都有了，我们可以让平面变3D的过程动态的演示出来了，就是css3的 Animation。
在了解Animation之前，我们必须了解另一个特殊的东西，Keyframes。

这里是图形图像里的一个基础概念就是关键帧，每一个关键帧代表动画的一个过程节点，Keyframes具有其自己的语法规则，他的命名是 由”@keyframes”开头，后面紧接着是这个“动画的名称”加上一对花括号“{}”，括号中就是一些不同时间段样式规则，有点像我们css的样式写 法一样。例如：

@-moz-keyframes name{     0% {       -moz-transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);     }     25% {       -moz-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);     }     50% {       -moz-transform:rotateY(180deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);     }     75% {       -moz-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);     }     100% {       -moz-transform:rotateY(0eg) rotateX(0deg) rotateZ(0deg) translateZ(0px);     }  }

这里，name是动画的名称，百分比里边只要写你要实现的动画就行，可以写位移啊，色值变化啊，透明度变化啊等等。
然后我们再看一下Animation的几个常用属性：

animation-name:'name';/*动画属性名，也就是我们前面keyframes定义的动画名*/animation-duration: 2s;/*动画持续时间*/animation-timing-function: linear;/*动画频率，有匀速，先快后慢    linear：动画以匀速运动ease：默认值，开始慢，中间快，结束慢，不对称ease-in：开始慢，后面快ease-out：开始快，后面慢ease-in-out：开始慢，中间快，结束慢，对称（注意与ease的区别）cubic-bezier(n,n,n,n)：可以使用cubic-bezier自定义速度，n的取值从0到1*/animation-delay: 2s;/*动画延迟时间*/animation-iteration-count: 1;/*定义循环资料，infinite为无限次*/animation-direction: alternate;/*定义动画方式， normal 动画仅正向播放。 alternate 动画正向播放奇数次迭代，并反向播放偶数次迭代。在反向播放周期中，与 animation-timing-function 关联的值也会反转。*/

Animation的简化版本transition

搜集资的时候发现还有一个transition过度属性，据说他可以称为animation的简化版本。因为animation属性比transition属性多包含keyframes规则显式控制当前帧的属性，因而更加灵活。
例如：

.contain{width: 392px; position: relative; bottom: -20px; opacity: 0;}.contain.on{ bottom: 0; opacity: 1;-webkit-transform:translate(-100px,100px); transition:opacity 500ms ease-out 2s,transform 1500ms ease-in-out;  -webkit-animation:opacity 500ms ease-out 2s,transform 1500ms ease-in-out;-moz-animation:opacity 500ms ease-out 2s,transform 1500ms ease-in-out;-ms-animation:opacity 500ms ease-out 2s,transform 1500ms ease-in-out;-o-animation:opacity 500ms ease-out 2s,transform 1500ms ease-in-out;  }当符合某种条件时为contain添加.on类，即可有立即x移动-100px,y移动100px,历时1500ms;延时2s 历时500ms的“由下往上 由透明变为实体”的动画效果。注意针对性写，而不是写all ease-in 500ms;性能太低语法：transition: property duration timing-function delay;

但是需要注意的是：火狐浏览器对于transition最后一个数值要求很严格，如果延时为0时我们往往会忽略后面的S，则火狐上无效果！
transition 遇到的特殊问题：
.aa完成设定动作之后会恢复原样，换做animation 设置forwards属性依旧会恢复原样。
解决方案：将.aa{display:inline-block;}或者设置为display：block；