matrix()基本の座標

実行結果

座標
x1,y1,x2,y2,x3,y3 x1,y1横軸の終点
x2,y2縦軸の終点
x3,y3始点の座標

基本の座標
matrix(1,0,0,1,0,0);

div1

動きません。基本の座標です。

プログラム

  HTML
  <input type="checkbox" id="in1">基本の座標
  <br>matrix(1,0,0,1,0,0);
  <div class="div0 div1">div1</div>
  
/*CSS*/
.div0{
    width:  100px; height: 30px;
    background-color: #842;
    position: relative;top: 5vw;left: 5vw;/**/
    transition: all 2s;}/*経過時間*/
  #in1:checked ~ .div1{/*スイッチ1が入ったとき*/
   transform: matrix(1,0,0,1,0,0);}/*マトリクス*/

箱を作って動きを見ます。文字を中に入れておくと方向などが分かり易くなります。

箱を作って内容を決める以外は,スイッチの部分があるだけです。

マトリクスの考え方

始x3,y3　横軸終点
・-------->x1,y1

↓x2,y2 縦軸終点

3つの点をどのような配置にするのかで,形が変わります。

始点の移動

実行結果

matrix(1,0,0,1,50,80)

基本
matrix(1,0,0,1,0,0) matrix
(1,0,0,1,50,80)

div2

斜めに移動します。

プログラム

HTML
<input type="checkbox" id="in2">skewY(45deg)
<div class="div0 div2">div2</div>
  
/*CSS*/
.div0{
width:  100px; height: 30px;
background-color: #842;
position: relative;top: 0vw;left: 30vw;
/**/
transition: all 2s;}/*経過時間*/
#in2:checked ~ .div2{/*スイッチ2が入ったとき*/
    transform: matrix(1,0,0,1,50,80);}/*移動*/

px,vwなどの単位は付けられません。エラーになります。

単位はドット？

x1,y1等は小さな値なので,始点も小さな数で調べていましたが,ドット単位のようです。少し大きな数字でないと動きは見えにくく,理解できませんでした。

始点0,0
・-------->x1,y1
｜　　　横軸終点
｜　・始点50,80
↓x2,y2
縦軸終点

matrix x1,y1

実行結果

matrix(1,1,0,1,0,0)

matrix
(1,1,0,1,0,0)

div3

プログラム

HTML
<input type="checkbox" id="in3">matrix(1,1,0,1,0,0)
<div class="div0 div3">div3</div>
  
/*CSS*/
.div0{
width:  100px; height: 30px;
background-color: #842;
position: relative;top: 0vw;left: 30vw;
/**/
transition: all 2s;}/*所要時間*/
#in3:checked ~ .div3{
    /*スイッチ3が入ったとき*/
transform: matrix(1,1,0,1,0,0);}/*傾斜*/

始点0,0
・-------->x1,y1
｜　　横軸終点↓
｜　　　　移動1,1
↓x2,y2
縦軸終点

matrix x2,y2

実行結果

matrix(1,0,1,1,0,0)

matrix
(1,0,1,1,0,0)

div4

プログラム

HTML
<input type="checkbox" id="in3">matrix(1,0,1,1,0,0)
<div class="div0 div4">div4</div>
  
/*CSS*/
.div0{
width:  100px; height: 30px;
background-color: #842;
position: relative;top: 0vw;left: 30vw;
/**/
transition: all 2s;}/*所要時間*/
#in4:checked ~ .div4{
    /*スイッチ3が入ったとき*/
transform: matrix(1,0,1,1,0,0);}/*傾斜*/

始点0,0
・-------->x1,y1
｜　　横軸終点
｜　　　　 ↓x2,y2→移動1,1
縦軸終点