html + css 01: 3d立方体

html + css实现3d立方体

css代码

/*页面背景色*/
body{
    background-color: black;
    background-repeat:no-repeat;
}

/********************** 双层3D立方体 *********************/

/*最外层容器*/
.wrap{
    margin: 360px;
    left: 80px;
    width: 200px;
    height: 200px;
    position: relative;

    /*3D模式展示*/
    transform-style: preserve-3d;

    /*引入动画：动画名称 展示时间 循环展示*/
    animation: rotate 150s infinite;

    /*匀速展示*/
    animation-timing-function: linear;
}

/**************************** 设置内层立方体组件的属性 ****************************/

/* 设置内部组件属性 */
.wrap span{
    display: block;
    position: absolute;
    width: 200px;
    height: 200px;
    top: 0;
    left: 0;

    /*透明度*/
    /*opacity: 0.8;*/
}

/*内部正方形旋转平移 组装成内部立方体*/

.i-top{
    transform: rotateX(90deg) translateZ(100px);
    background-image: url("../resources/images/xinhaicheng/i6.png");
}

.i-bottom{
    transform: rotateX(90deg) translateZ(-100px);
    background-image: url("../resources/images/xinhaicheng/i2.png");
}

.i-right{
    transform: rotateY(90deg) translateZ(100px);
    background-image: url("../resources/images/xinhaicheng/i1.png");

}

.i-left{
    transform: rotateY(90deg) translateZ(-100px);
    background-image: url("../resources/images/xinhaicheng/i5.jpeg");
}

.i-front{
    transform: translateZ(100px);
    background-image: url("../resources/images/xinhaicheng/i3.png");
}

.i-back{
    transform: translateZ(-100px);
    background-image: url("../resources/images/xinhaicheng/i4.png");
}

/*具体动画效果，由关键帧来刻画*/
@keyframes rotate{

    /*开始*/
    0%{
        transform: rotateX(0deg) rotateY(0deg);
    }

    /*中间*/
    50%{

        transform: rotateY(360deg) rotateX(-90deg);
    }

    /*结束*/
    100%{

        transform: rotateX(0deg) rotateY(0deg);
    }

}

/*************************** 设置外层立方体属性 ********************/

/* 设置外部组件属性 */
.wrap div{
    width: 200px;
    height: 200px;
    position: absolute;

    /*透明度*/
    opacity: 0.9;

    /*外部组件打开效果所用的时间*/
    transition: all 1s;

}

/*外部正方形旋转平移 组装成外部立方体*/

.o-top{
    transform: rotateX(90deg) translateZ(100px);
    background-image: url("../resources/images/xinhaicheng/o2.jpg");
}

.o-bottom{
    transform: rotateX(90deg) translateZ(-100px);
    background-image: url("../resources/images/xinhaicheng/o5.jpg");
}

.o-right{
    transform: rotateY(90deg) translateZ(100px);
    background-image: url("../resources/images/xinhaicheng/o4.jpeg");

}

.o-left{
    transform: rotateY(90deg) translateZ(-100px);
    background-image: url("../resources/images/xinhaicheng/o3.jpg");
}

.o-front{
    transform: translateZ(100px);
    background-image: url("../resources/images/xinhaicheng/o6.jpeg");
}

.o-back{
    transform: translateZ(-100px);
    background-image: url("../resources/images/xinhaicheng/o1.png");
}

/*打开效果*/
.wrap:hover .o-bottom{
    transform: rotateX(90deg) translateZ(-250px);
}

.wrap:hover .o-top{
    transform: rotateX(90deg) translateZ(250px);
}

.wrap:hover .o-left{
    transform: rotateY(90deg) translateZ(-250px);
}

.wrap:hover .o-right{
    transform: rotateY(90deg) translateZ(250px);
}

.wrap:hover .o-front{
    transform: translateZ(250px);
}

.wrap:hover .o-back{
    transform: translateZ(-250px);
}

html代码

<!-- 准备一个容器 -->
<div class="wrap">

    <!-- 创建内部立方体组件 -->
    <span class="i-front"></span>
    <span class="i-back"></span>
    <span class="i-left"></span>
    <span class="i-right"></span>
    <span class="i-top"></span>
    <span class="i-bottom"></span>

    <!-- 创建外部立方体组件 -->
    <div class="o-front"></div>
    <div class="o-back"></div>
    <div class="o-left"></div>
    <div class="o-right"></div>
    <div class="o-top"></div>
    <div class="o-bottom"></div>

</div>