Help us understand the problem. What is going on with this article?

CSSだけで動的サイトを作れるらしい!!

はじめに

最近まで深層学習の技術ブログを書いていたが、心機一転してWeb系の勉強に戻ることにした。
今までは安定を求めてAIを数ヶ月勉強していたけど面白くなかった。
やはり楽しいほうがいいと思ったので今回Web系に戻ろうと思う。

CSSだけで動的サイトを作る

今まで動的サイトといえばJavaScriptを使わないといけないと思っていたが、実はJavaScriptから提供された変形とアニメーションの機能がCSSにあるらしい。
聞くところによればJavaScriptよりも高速に動くらしいのでこれから是非使っていきたいと思う。

transformプロパティ

cssでtransformプロパティを使うことで、移動・拡大縮小・回転・傾斜の変形を行うことができる。
これらの変形を行うには、transformプロパティで、各トランスフォーム関数をして営してあげることで行うことができる。

transelate(x軸の移動,y軸の移動)
translate関数を使うことで、x軸y軸の移動を行うことができる。
上の様にx軸とy軸の移動する距離を指定してあげることで要素を移動することができる。

scale(x軸方向の倍率,y軸方向の倍率)
scale関数を使うことで要素のx軸y軸方向の拡大縮小が可能です。

rotate(回転角度)
rotate関数で要素を回転させることができます。
どれだけ回転させるかは、角度を指定することで決められます。

skew(x軸の傾斜角度,y軸の傾斜角度)
skew関数で要素に傾斜をつける変形を行うことができます。

SyutoHidano
AIエンジニアを目指す文系大学生です。 大学1年生の前期まではWEBエンジニアを目指していたのですが、将来性に不安を感じてAIエンジニアを目指すことを決意!! Python文法や基礎的な機械学習は勉強済みなので基本的に深層学習の技術書を進めていきます。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away