CSSアニメーション、
期末テスト。

解答例

#point { transform-origin:left bottom; animation:naname 2s infinite; } @keyframes naname { from { transform:rotate(-135deg); } }

html要素のtransform-origin（変形の基準点）は、デフォルトがcenter（要素の中央）となっています。
これを「left bottom」と指定する事で、基準点を左下に持っていくことができます。

解答例

#ao { animation:ao 2s ease-out alternate infinite; } @keyframes ao { to { transform:translateY(「「１100%」」); } } #aka { animation:aka 2s ease-out alternate infinite; } @keyframes aka { to { transform:translateY(「「１-100%」」); } }

移動にはtranslate関数を用います。translateでの%指定は、自身のサイズに対する比率として解釈されます。
そのため「上に100%」「下に100%」とすれば２つの要素はちょうど入れ替わります。

解答例

#elm { 「「１transform-origin:bottom;」」 animation:elm 2s linear infinite; } @keyframes elm { from { transform:skewX(「「１-90deg」」); } }

skewX(-90°）で要素は右側に完全に倒れます。
また要素の足元は固定しておきたいので、transform-originを「bottom」としました。

今の問題が基本的すぎて物足りない方はこちら⬆︎もどうぞ。

解答例

#open { animation:open 2s ease-in-out infinite alternate; } @keyframes open { from { transform:rotateX(-90deg); } 50% { transform:rotateX(-90deg); } to { transform:rotateX(0deg); } } #closed { animation:closed 2s ease-in-out infinite alternate; } @keyframes closed { from { transform:rotateX(0deg); } 50% { transform:rotateX(90deg); } to { transform:rotateX(90deg); } }

見せたくないほうの画像をrotateX(90deg)に固定しておき、見せたいほうを回転させています。

解答例

#element { width:50%; animation:element 6s ease-out infinite; } @keyframes element { to { transform:rotate(2turn) translate(100%); } }

複数のtransformの扱いがわかれば、コードはごく単純なもので実装することができます。
transform関数は「後に記述したものが内包される」ので、（（平行移動している要素）が回転）するように、関数を並べています。