CSS3 はクールな 3D 回転遠近法効果を実現します

<スタイル>
.d3-ラップ{
    位置: 相対的;
    幅: 300ピクセル;
    高さ: 300px;
    マージン: 120px 自動;
    /* ネストされた要素を 3D 空間でどのようにレンダリングするかを指定します */
    変換スタイル: 3D を保持します。
    変換: rotateX(0) rotateY(45deg);
    変換の原点: 150px 150px 150px;
}

.rotateX{
    幅: 200ピクセル;
    高さ: 200px;
    背景色: #06c;
    遷移: 変換 2s;
    アニメーション: rotateX 6s infinite;
}

@keyframes 回転X {
    0% {
        変換: rotateX(0);
    }
    100% {
        変換: rotateX(360deg);
    } 
}
</スタイル>
<div class="d3-wrap">
    <div class="rotateX"></div>
</div>

.d3-ラップ{
    変換スタイル: 3D を保持します。
    視点：500;
    /* 要素が表示されるビューを設定します */
    -webkit-perspective: 500;
}

.d3-ラップ{
    位置: 相対的;
    幅: 300ピクセル;
    高さ: 300px;
    マージン: 120px 自動;
    変換スタイル: 3D を保持します。
    視点：500;
    -webkit-perspective: 500;
    変換: rotateX(0) rotateY(45deg);
    変換の原点: 中心 中心;
}

.transformZ {
    幅: 200ピクセル;
    高さ: 200px;
    背景色: #06c;
    遷移: 変換 2s;
    アニメーション: transformZ 6s 無限;
}

@keyframes 変換Z {
    0% {
        変換: translateZ(100px);
    }
    100% {
        変換: translateZ(0);
    } 
}

。容器 {
    位置: 相対的;
    幅: 300ピクセル;
    高さ: 300px;
    マージン: 120px 自動;
    変換スタイル: 3D を保持します。
    /* より立体的に見せるために*/
    変換: rotateX(-30deg) rotateY(45deg);
    変換の原点: 150px 150px 150px;
    アニメーション: 6秒間無限回転;
}
.コンテナ .ページ {
    位置: 絶対;
    幅: 300ピクセル;
    高さ: 300px;
    テキスト配置: 中央;
    行の高さ: 300px;
    色: #fff;
    背景サイズ: カバー;
}
.コンテナ .ページ:最初の子 {
    背景画像: url(./my.jpeg);
    背景色: rgba(0,0,0,.2);
}
.コンテナ .ページ:n番目の子(2) {
    変換: rotateX(90deg);
    変換の原点: 0 0;
    遷移: 10 秒を変換します。
    背景色: rgba(179, 15, 64, 0.6);
    背景画像: url(./my2.jpeg);
}

.コンテナ .ページ:n番目の子(3) {
    変換: translateZ(300px);
    背景色: rgba(22, 160, 137, 0.7);
    背景画像: url(./my3.jpeg);
}

.コンテナ .ページ:n番目の子(4) {
    変換: rotateX(-90deg);
    変換の原点: -300px 300px;
    背景色: rgba(210, 212, 56, 0.2);
    背景画像: url(./my4.jpeg);
}
.コンテナ .ページ:n番目の子(5) {
    変換: rotateY(-90deg);
    変換の原点: 0 0;
    背景色: rgba(201, 23, 23, 0.6);
    背景画像: url(./my5.jpeg);
}
.コンテナ .ページ:n番目の子(6) {
    変換: 回転Y(-90度) 移動Z(-300ピクセル);
    変換の原点: 0 300px;
    背景色: rgba(16, 149, 182, 0.2);
    背景画像: url(./my6.jpeg);
}

<div class="コンテナ">
    <div class="page">あ</div>
    <div class="page">B</div>
    <div class="page">C</div>
    <div class="page">は</div>
    <div class="page">え</div>
    <div class="page">F</div>
</div>