CSSのtransformプロパティは大したことしていない件【translate, scale, rotate, skew】

テキストで確認したい方はこちら↓
https://lorem-co-ltd.com/scale-basic

画像素材と完成版のコードはこちら↓
https://drive.google.com/drive/folder...

関連動画はこちら↓
3Dの回転：   • 【頻出Webデザイン】rotateXとrotateYが何してるか理解できる...  
skewを使った例：   • CSSで斜めの仕切り線を作る方法【頻出Webデザイン、skew】  
メインビジュアルでの活用：   • 【頻出Webデザイン】メインビジュアルあるある：background-...  

CSSのtransformプロパティは、要素を回転、拡大縮小、傾斜、移動させるためのプロパティです。非常に強力なプロパティで初心者のうちは敬遠しがちですが、意外と簡単な仕組みなので解説です。
本動画では、translate、scale、rotate、skewの4つのtransform関数を実際に使ってみて、その動きを解説します。

この動画はReact初心者のWebデザイナーが勉強したことや初めて知ったことを復習と共有を目的に投稿します。
学習教材のような動画ではありませんが、Reactでのコーディング、Reduxでの状態管理など、多くのことを学びますので一緒にハンズオンで作業して頂く形で視聴していただくことができると思います。

また僕自身がreactの予備知識は必要ありませんので、
同じような初心者の方はもちろん、
「Web制作でコーディングは出来るけどReactもやってみたい」という方に見て頂けると嬉しいです。


ブログ：https://lorem-co-ltd.com/
引用元：   • Learn CSS Transform In 15 Minutes  
Twitter：  / rubyprogram  

#transform #css　#translate #scale #rotate #skew
#web制作 #webデザイン #webデザイナー #javascript #コーディング