single-javascript.php - 2015.07.22 - 118 - https://www.nascha.jp/javascript/css_transform.html

JAVACRIPT

*118

css transform

transformを書くのにいちいちググるのが面倒なので、
基礎的な動きのcssを生成するものを用意しました。
  • 横移動（left）
  • 縦移動（top）
  • 角度（deg）
  • 拡大率
  • 透明度（おまけ）

生成CSS

書式はこんな感じで。
.class_name { /*animation: [アニメーションの名前] [動作時間] [終了時の状態] [開始までの時間];*/ animation: test 1s forwards 1s; } @keyframes test { 0% {transform: translate(0px, 0px) rotate(0deg) scale(1) ;opacity:0;} 100% {transform: translate(0px, 10px) rotate(10deg) scale(1.5) ;opacity:1;} }
アンカーに割りあてる時はこんな感じ。
a.class_name { display: inline-block; transition: all .3s; } a.class_name:hover{ transform: translate(0px, 10px) rotate(10deg) scale(1.5) ;opacity:1; }

post_pages

デザイニングナスカはwebデザインなどのweb系、およびDMデザインなどの平面デザインを行っています。

安く、手早く、それなりに。をコンセプトとしてデザイン活動を行っています。
デザイニングナスカという言葉は創立時に多くの知り合いの方のアイデアを元に作った造語です。
この名前をずっと長く使えるように頑張っていきたいと思っています。
サイトメニューを見る ページトップに戻る

Twitter　Facebook　mail