Maison > Article > interface Web > Implémentation pure CSS3 du code d'effets spéciaux de rotation de cube 3D

Implémentation pure CSS3 du code d'effets spéciaux de rotation de cube 3D

零下一度original: 2017-05-17 17:36:093063parcourir

Dans le cours micro-professionnel front-end de NetEase, il y a un devoir parascolaire pour implémenter un cube rotatif 3D. Cela m'a pris du temps pour le faire, et c'était intéressant j'ai écrit un tutoriel simple pour que tout le monde puisse l'apprendre. Mettez d'abord l'effet final à obtenir.

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>CSS3 3D立方体多边形动画特效 - 代码笔记</title><style type="text/css">*{
 margin:0 auto;
    padding:0;
}
@keyframes rotate{
    0%{
        transform:rotateX(0deg) rotateY(0deg);
    }
    100%{
        transform:rotateX(360deg) rotateY(360deg);
    }
}
html{
    background:linear-gradient(#ff0 0%, #000 80%);
    height:100%;
}
.wrap{
    margin-top:200px;
    perspective: 1000px; /* 视图距元素的距离 相当于摄像机 */
}
.cube{
    width:200px;
    height:200px;
    position:relative;
    color:#fff;
    font-size:36px;
    font-weight:bold;
    text-align:center;
    line-height:200px;
    transform-style:preserve-3d; /* 默认flat 2D */
    transform:rotateX(-30deg) rotateY(-70deg); 
    animation:rotate 20s infinite linear; /*播放时间 播放次数为循环 缓动效果为匀速 */
}
.cube > div{
    width:100%;
    height:100%;
    border:1px solid #fff;
    position:absolute;
    background-color:#333;
    opacity:.6;
    transition:transform 0.4s ease-in;
}
.cube .out-front{
    transform: translateZ(100px);
}
.cube .out-back{
    transform: translateZ(-100px) rotateY(180deg);
}
.cube .out-left{
    transform: translateX(-100px) rotateY(-90deg);
}
.cube .out-right{ 
    transform: translateX(100px) rotateY(90deg);
}
.cube .out-top{
    transform: translateY(-100px) rotateX(90deg);
}
.cube .out-bottom{
    transform: translateY(100px) rotateX(-90deg);
}
.cube > span{
    display:block;
    width:100px;
    height:100px;
    border:1px solid black;
    background-color:#999;
    position:absolute;
    top:50px;
    left:50px;
}
.cube .in-front{
    transform: translateZ(50px);
}
.cube .in-back{
    transform: translateZ(-50px) rotateY(180deg);
}
.cube .in-left{
    transform: translateX(-50px) rotateY(-90deg);
}
.cube .in-right{
    transform: translateX(50px) rotateY(90deg);
}
.cube .in-top{
    transform: translateY(-50px) rotateX(90deg);
}
.cube .in-bottom{
    transform: translateY(50px) rotateX(-90deg);
}
.wrap:hover .out-front{
    transform: translateZ(200px);
}
.wrap:hover .out-back{
    transform: translateZ(-200px) rotateY(180deg);
}
.wrap:hover .out-left{
    transform: translateX(-200px) rotateY(-90deg);
}
.wrap:hover .out-right{
    transform: translateX(200px) rotateY(90deg);
}
.wrap:hover .out-top{
    transform: translateY(-200px) rotateX(90deg);
}
.wrap:hover .out-bottom{
    transform: translateY(200px) rotateX(-90deg);
}
 
</style>
</head>
<body>
<div class="wrap">
    <div class="cube">
        <div class="out-front">前面</div>
        <div class="out-back">后面</div>
        <div class="out-left">左面</div>
        <div class="out-right">右面</div> 
        <div class="out-top">上面</div>
        <div class="out-bottom">下面</div>
 
        <span class="in-front"></span>
        <span class="in-back"></span>
        <span class="in-left"></span>
        <span class="in-right"></span>
        <span class="in-top"></span>
        <span class="in-bottom"></span>
    </div>
</div>
 
<div style="text-align:center;margin:50px 0; font:normal 14px/24px &#39;MicroSoft YaHei&#39;;">
<p>适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
</div>
</body>
</html>

【Recommandations associées】

1. Recommandation spéciale : Téléchargement de la version V0.1 de "php Programmer Toolbox"

Tutoriel vidéo en ligne CSS gratuit

3. 2)-tutoriel vidéo CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemple de code CSS3 pur pour réaliser une mise à jour continue de l'état logistiqueArticle suivant：Exemple de code CSS3 pur pour réaliser une mise à jour continue de l'état logistique

Articles Liés

Voir plus