独立したCSS translate・rorate・scaleプロパティだからできる、豊かなアニメーションテクニック！ - ICS MEDIA

2023/03/09 102 users ICS MEDIA rotate プロパティ CSS 記述

独立したCSS translate・rorate・scaleプロパティだからできる、豊かなアニメーションテクニック！ CSSのtransformプロパティはtraslate()やrotate()を1つの値として受け取るプロパティでした。そのため、同時にそれらを動かしたい場合、1つのプロパティに両方の記述が必要でした。これは記述の複雑化を生みます。 最新... 続きを読む

早く言ってよ〜！CSSのtransformは同じ関数を複数回つかってもOKだった | 株式会社LIG

2021/07/05 26 users transform foo translateX CSS 関数

こんにちは、エンジニアのつっちーです。 .foo { transform: translateX(-50%) translateX(10px); } みなさんは、このCSSが有効であること、ご存じだったでしょうか。CSSのtransformプロパティでは、このように同じ関数を複数回使用できます。transformにはもう何年もお世話になってきたというのに、このことは最近にな... 続きを読む

一部のAndroidでは、CSS3アニメーションrotateの方向指定が利かない | x-fit - クロスフィット -

2012/11/15 25 users エバンジェリスト クロスフィット x-fitチーム 現象 要素

こんにちは。x-fitチーム・エバンジェリストの渡辺です。Webサイトで使用するアニメーションをCSS3で書くことも増えてきていると思いますが、要素を回転させるアニメーションrotateにおいて、一部のAndroidでは回転方向の指定が利かない現象が確認されましたのでまとめてみます。 CSS3で要素を回転させるアニメーション CSS3で、要素のアニメーション機能としてtransformプロパティが... 続きを読む

hail2u.net - Weblog - CSSのみでスライドして画像を切り替えるギャラリーを作る

2011/02/01 34 users Weblog hail2u.net CSS ギャラリー 画像

ポートフォリオとかでよく見かけるクリックすると横にスライドしながら画像を切り替えるギャラリーUIをCSS3だけで作ってみた。最終的に、エフェクト的には満足のいかないところがあるもののすごくシンプルに作成できたのでまぁ満足。:target擬似クラスとtransitionプロパティ(とtransformプロパティ)の組み合わせは色々できて楽しい。View Demo: CSS Sliding Image... 続きを読む