标签：01 translateZ 100px 90deg transform html resources background css

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>

标签：01,translateZ,100px,90deg,transform,html,resources,background,css
来源： https://www.cnblogs.com/nefu-wangxun/p/16500745.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。