css3 トランスフォーム（変形）実践例

1-- トランスフォームを使用してセンタリング効果を実現します

<div class="center">
        ....
</div>

.center{
    text-align: center;
    background-color: #fff;
    border-radius: 20px;
    width: 300px;
    height: 350px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

left と top の両方を 50% とし、div の左端の div を画面の左端から水平方向に 50% にします。

垂直方向は同じなので、div の上部は画面の上部から 50% 離れています。

したがって、transform を使用して、自身の幅 (高さ) の 50% を左 (上) に移動します。

センタリング効果も得られます。

2 -- 変換を使用して、マウスを画像上に置いたときにズームおよびズームインするアニメーション効果を実現します。

<el-image 
    fit="cover" 
    :src="weixin" 
    :lazy="true" 
    style="width:32px;height:32px;" 
    class="header-icon"
/>

.header-icon {
    cursor: pointer;

    backface-visibility: hidden;
    transform: translateZ(0);
    transition: transform 0.25s ease-out;
}
.header-icon:hover {
    transform: scale(1.2);
    color: #60D4E7;
}

transformこれは、回転回転、歪みスキュー、スケーリングスケール、移動移動、マトリックス変形マトリックスを含む変形を意味します。

rotate(xx deg)(2D)、 rotateX()(3D)、 rotateY()(3D): 中心が基点となりdeg回転角度を示し、負の数値は反時計回りの回転を示します。

translate(x,y) , translateX(x) , translateY(y): 中心を基点として使用し、設定されたパラメータ値に従って要素を移動しますx。y

scale(x,y)、scaleX(x,1)、 scaleY(1,Y): スケーリングベースは 1 です。値が 1 より大きい場合、要素はズームインされます。それ以外の場合、値が 1 より小さい場合、要素はズームアウトされます。

skew(x,y)、 skewX(x)、 skewY(y): 中心を基点とし、最初のパラメータは水平方向のツイスト角度、2 番目のパラメータは垂直方向のツイスト角度です。

すべての操作のデフォルトの基点は中心です。

css3 トランスフォーム（変形）実践例

おすすめ