CSS3知识之立方体动画效果

最新推荐文章于 2025-08-09 15:48:08 发布

weixin_33691817

最新推荐文章于 2025-08-09 15:48:08 发布

阅读量58

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lvmylife/p/5549832.html

本文介绍了一个使用HTML和CSS实现的3D立方体翻转动画效果。立方体由六个面组成，每个面都可以通过鼠标悬停进行交互，并带有内嵌的小立方体。文章提供了完整的HTML和CSS代码，演示了如何创建这种3D视觉效果。

效果图：

HTML代码：

<div class="wrap">
    <div class="cube">
        <div class="outer-front">前面</div>
        <div class="outer-back">后面</div>
        <div class="outer-left">左面</div>
        <div class="outer-right">右面</div>
        <div class="outer-top">上面</div>
        <div class="outer-bottom">底面</div>

        <span class="inner-front"></span>
        <span class="inner-back"></span>
        <span class="inner-left"></span>
        <span class="inner-right"></span>
        <span class="inner-top"></span>
        <span class="inner-bottom"></span>
    </div>
</div>

CSS代码：

html{
    background: linear-gradient(#f00, #000); height: 100%;
}
.wrap{ 
    margin: 200px; perspective: 1000px;
}
.cube{
    margin: 0 auto; width: 200px; height: 200px; position: relative; color: #fff; font-size: 18px; text-align: center; line-height: 200px;
    transform-style: preserve-3d; animation: rotate 6s infinite linear;
}
/*定义动画*/
@keyframes rotate{
    0%{ transform: rotateX(0deg) rotateY(0deg); }
    100%{ transform: rotateX(360deg) rotateY(360deg); }
}
/*大立方体样式*/
.cube div{
    border: 1px solid #666; width: 100%; height: 100%; background: rgba(20,50,50,0.8); position: absolute; transition: all 1s;
}
.cube .outer-front{
    transform: translateZ(100px);
}
.cube .outer-back{
    transform: translateZ(-100px) rotateY(-180deg);
}
.cube .outer-left{
    transform: translateX(100px) rotateY(90deg);
}
.cube .outer-right{
    transform: translateX(-100px) rotateY(-90deg);
}
.cube .outer-top{
    transform: rotateX(90deg) translateZ(100px);
}
.cube .outer-bottom{
    transform: rotateX(-90deg) translateZ(100px);
}
/*大立方体鼠标滑过*/        
.cube:hover .outer-front{
    transform: translateZ(200px);
}
.cube:hover .outer-back{
    transform: translateZ(-200px) rotateY(-180deg);
}
.cube:hover .outer-left{
    transform: translateX(200px) rotateY(90deg);
}
.cube:hover .outer-right{
    transform: translateX(-200px) rotateY(-90deg);
}
.cube:hover .outer-top{
    transform: rotateX(90deg) translateZ(200px);
}
.cube:hover .outer-bottom{
    transform: rotateX(-90deg) translateZ(200px);
}

/*小立方体*/
.cube span{
    display: block; width: 100px; height: 100px; background: rgba(70,190,170,0.8); position: absolute;    
}
.cube span:nth-child(even){
    background: url('2.jpg') no-repeat;  background-size: contain;
}
.cube span:nth-child(odd){
    background: url('3.jpg') no-repeat;  background-size: contain;
}
.cube .inner-front{
    transform: translateZ(50px) translateY(50px) translateX(50px);
}
.cube .inner-back{
    transform: translateZ(-50px) translateY(50px) rotateY(-180deg) translateX(-50px);
}
.cube .inner-left{
    transform: translateX(-50px) translateY(50px)  rotateY(-90deg) translateZ(-50px);
}
.cube .inner-right{
    transform: translateX(49px) translateY(50px) rotateY(90deg) translateZ(50px);
}
.cube .inner-top{
    transform: rotateX(90deg) translateZ(0px) translateX(50px);
}
.cube .inner-bottom{
    transform: rotateX(-90deg) translateZ(100px) translateX(50px);
}