9
CSSアニメーションを使用して、scaleZ()のプロパティとtranslateZ()のdivのアニメーションを実行する必要があります。matrix3dの値で初期のキーフレームを使用すると、CSSアニメーションが正しく動作しない
transformプロパティのアニメーションの最初と最後のキーフレーム値は、同様の "形式" である場合、次のコードが正常に動作：
- 0％
transform: rotateY(-179deg) scaleZ(2) translateZ(200px); - 100％
transform: rotateY(179deg) scaleZ(2) translateZ(200px);
console.clear();
document.addEventListener('DOMContentLoaded',() => {
let content1 = document.querySelector('#content1');
var computedTransform = window.getComputedStyle(content1).transform;
console.log(computedTransform);
}); @-webkit-keyframes animation {
0% {
/*works*/
-webkit-transform: rotateY(-179deg) scaleZ(2) translateZ(200px);
transform: rotateY(-179deg) scaleZ(2) translateZ(200px);
/*issue*/
/*transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);*/
}
100% {
-webkit-transform: rotateY(179deg) scaleZ(2) translateZ(200px);
transform: rotateY(179deg) scaleZ(2) translateZ(200px);
}
}
@keyframes animation {
0% {
/*works*/
-webkit-transform: rotateY(-179deg) scaleZ(2) translateZ(200px);
transform: rotateY(-179deg) scaleZ(2) translateZ(200px);
/*issue*/
/*transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);*/
}
100% {
-webkit-transform: rotateY(179deg) scaleZ(2) translateZ(200px);
transform: rotateY(179deg) scaleZ(2) translateZ(200px);
}
}
#content1 {
-webkit-animation: animation 2s;
animation: animation 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
/*works*/
-webkit-transform: rotateY(-179deg) scaleZ(2) translateZ(200px);
transform: rotateY(-179deg) scaleZ(2) translateZ(200px);
/*issue*/
/*transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);*/
}<div id="wrapper1" style="position:fixed; top: 100px; left:300px; perspective: 1000px; width: 250px; height:250px; border: dotted 1px blue">
<div id="content1" style="width: 250px; height:250px; background-color:lightsalmon; opacity:0.2;">
</div>
</div>matrix3Dアニメーション正しく動作しませんWindow.getComputedStyle()から返される0％書かれたキーフレームのためtransformと同じアニメーション：
- 0％
transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1); - 100％
transform: rotateY(179deg) scaleZ(2) translateZ(200px); あります
console.clear();
document.addEventListener('DOMContentLoaded',() => {
let content1 = document.querySelector('#content1');
var computedTransform = window.getComputedStyle(content1).transform;
console.log(computedTransform);
});@-webkit-keyframes animation {
0% {
/*works*/
/*transform: rotateY(-179deg) scaleZ(2) translateZ(200px);*/
/*issue*/
-webkit-transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);
transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);
}
100% {
-webkit-transform: rotateY(179deg) scaleZ(2) translateZ(200px);
transform: rotateY(179deg) scaleZ(2) translateZ(200px);
}
}
@keyframes animation {
0% {
/*works*/
/*transform: rotateY(-179deg) scaleZ(2) translateZ(200px);*/
/*issue*/
-webkit-transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);
transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);
}
100% {
-webkit-transform: rotateY(179deg) scaleZ(2) translateZ(200px);
transform: rotateY(179deg) scaleZ(2) translateZ(200px);
}
}
#content1 {
-webkit-animation: animation 2s;
animation: animation 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
/*works*/
/*transform: rotateY(-179deg) scaleZ(2) translateZ(200px);*/
/*issue*/
-webkit-transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);
transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);
}<div id="wrapper1" style="position:fixed; top: 100px; left:300px; perspective: 1000px; width: 250px; height:250px; border: dotted 1px blue">
<div id="content1" style="width: 250px; height:250px; background-color:lightsalmon; opacity:0.2;">
</div>
</div>transformationの値が適切に利用できる場合
Window.getComputedStyle()または別の関数を使用して、DOMに計算されたスタイルから返されたキーフレームを0％として使用する必要がある技術的な理由
。
私の質問：
- は、第二の例バギーのための私のコードですか？
- 計算された値をDOMから取得する別の方法を提案できますか？
Window.getComputedStyle()から返された値に関連するバグを知っていますか？- CSSアニメーションのバグと
transformの別の "表記法"について知っていますか？
注：この問題は、最新のChrome（55.0.2883.87 m）とFireFox（50.1.0）で表示されます。
すべてのソリューションやアイデアを歓迎します。
EDIT：
私は、さらなる調査のために（Chromeの）いくつかの新しい例を作成しました。
値が代わりによって取られる所望の効果 https://jsbin.com/bodaxefake/edit?html,output
を予想通り
は基本的に2つの例では、「表記」のいずれかのタイプの変換を使用
from rotateY(20deg) to rotateY(90deg)
作品回転します計算されたCSSスタイルで、matrix3dを使ってアニメーションに再適用すると、アニメーションにはわずかな歪みがあります。
代わりに私はWindow.getComputedStyle()からmatrix3dを理解するのと全く同じ結果が同じ値を返すはずのアニメーションを再現することを期待しています。
不正な効果が https://jsbin.com/luhikahexi/edit?html,output
は、あなたはこれを達成することが可能であると思いますか？この問題にお時間をいただきありがとうございます。 – GibboK
360degの違いは無関係です（e-16）。これは、degからradに変換するときの単なる丸め誤差です。他の問題については、私は試してみますが、DOMから値を取得して、2つのローテーションの前に追加することができます。 – vals
私は計算された値に0％を得るためにちょっとした工夫をしましたが、もしあなたのコメントがありがとうと – vals