cssのTransfrom

cssでは一部の属性が混用されたり記憶が混乱したりすることがありますが、ここでまとめてみましょう.

Transform

変換、要素の変位、回転、スケール、チルト操作、2 Dまたは3 D回転をサポート

Transformの操作プロパティ:

(1)translateシフト
(2)route回転
(3)スケール
(4)skewスキュー

translateシフト

transform:translate(x,y) //       x     ，     y    
transform:translateX（x）
transform:translateY(y)
transform:translate3D(x,y,z)

古典的な応用:要素の幅が固定されていない場合、水平垂直中央を実現する

  



.box{
  position:relative;
width:300px;
height:300px;
border:1px solid red;
}
.center{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
//   transform:translate3d(-50%,-50%,0);
}

义齿

使用规则：

transform:route(deg) //2d            
transform:route3D(x,y,z,deg) //3d  ，    4   ，       ，      
transform:routeX() //  x   
transform:routeY() //  Y   
transform:routeZ() //  Z   

スケール

使用規則:

transform:scale(x,y) //  x     ，  y     ，            
transform:scaleX(x)
transform:scaleY(y)
transform:scaleZ(z)
transform:scale3D(x,y,z)

4431182-3c84f133d6e9fca7.png