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 は平面の回転軸を表し、中の値はその角度を表します。

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

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

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

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

transform: perspective(800);

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

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

perspective: 800;

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

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

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

transform-style アトリビュート

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

transform-style:preserve-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；