3D勾配成層

効果：

主な効果は、CSSです

2Dまたは3Dの要素への変換アプリケーションのプロパティを変換します。このプロパティは、要素に私たちを回転させることができ、スケール、または動きを傾けます。

トランジションは遷移時間です。

ALIGN-アイテム：センター、弾性カートリッジの<div>要素を合わせ

コンテンツは、正当化：中心;正当化コンテンツは、コンテナプロジェクトの中心に中心と、弾性ボックス要素がメイン軸（横軸）方向に整列している設定または取得するために使用され

コードは以下の通りであります：

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 頭> 
    < メタ文字コード= "UTF-8" > 
    < リンクのrel = "スタイルシート" タイプ= "テキスト/ cssの" のhref = "index.css" > 
    < タイトル> 3D渐变分层悬浮</ タイトル> 
</ ヘッド> 
< 身体> 
< divのクラス= "コンテナ" > 
<
SRC = "img1.jpg" > 
< IMG SRC = "img1.jpg" > 
< IMG SRC = "img1.jpg" > 
</ DIV > 
    
</ ボディ> 
</ HTML >

CSS：

本体 { 
    マージン：0。
    パディング：0 ; 
    幅：100％ ; 
    高さ：100VH。
    表示：フレックス。
    ALIGN-アイテム：センター ; 
    正当化-コンテンツ：センター ; 
} 
.container { 
    位置：相対。
    幅：360px; 
    高さ：360px; 
    
    変換：回転（-30deg）スキュー（25deg）スケール（0.8）。
    トランジション：0.5秒。
} 
.container IMG { 
    位置：絶対。 
    幅：100％。
    トランジション：0.5秒。
} 
.container：ホバーIMG：n番目の子（1）{ 
    変換：変換（40ピクセル、-40px）。
    不透明度：0.4; 
} 
.container：ホバーIMG：n番目の子（2）{ 
    変換：変換（80px、-80px）。
    不透明度：0.6; 
} 
.container：ホバーIMG：n番目の子（3）{ 
    変換：変換（120ピクセル、-120px）。
    不透明度：0.8; 
} 
.container：ホバーIMG：n番目の子（4）{ 
    変換：変換（160ピクセル、-160px）。
    不透明度：1; 
}

おすすめ