HTML+CSS实战操作旋转魔方

简介： 今天以纯HTML和CSS实现3D旋转魔方，可以搭建服务器上

实现过程

前期准备：

设置三个文件夹：css、html、images；分别放置文件index.css、index.html、images

1、HTML代码片段

1.1 放置图片肯定需要一个容器，毋庸置疑，最外层的容器为container

<div class="container"></div>

1.2  通过分析，魔方有6个面，但是实现hover的时候有一个分解的效果，总共有12个面

嗯，有点意思，直接在container容器里放置12div元素，div*12 Tab即可

<div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

1.3  HTML代码解决了，在编写CSS之前先引入CSS样式表，即index.html中引入index.css，引入的index.css一般放置在title标签下面，href文件路径根据自己设置而定。

<title>旋转魔方</title>
<link rel="stylesheet" href="../css/index.css">

CSS代码片段

2.1  css编写第一步一般都会写通配符来去除内外边距，来消除某些浏览器固定的网页模板对代码的影响。

*{
    margin: 0;
    padding: 0;
}

弹性盒布局设置：

魔方显然放在网页中心才显得好看，如何实现？传统布局——基于盒子模型，依赖 display 属性、position属性、float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

并且，传统布局代码冗长，出错率高，要时刻注意清除浮动或者在进行绝对定位时给父元素添加相对定位。否则就容易造成页面布局混乱。但是，Flex布局就可以避免这种情况：Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

2.2  对body进行设置弹性盒以及自己喜欢的背景颜色

body{
    //vw,vh为视口单位，1vw等于视口宽度的1%。
    width: 100vw;  
    height: 100vh;
    display: flex; //弹性盒设置
    justify-content:center; //主轴居中对齐
    align-items:center;     //交叉轴居中对齐
    /* 添加一个视距 */
    perspective: 1000px; //让旋转效果变得更真实
    background: #000;
}

2.3  对container容器元素进行相关设置，实现3D风格

.container{
    width: 150px;
    height: 150px;
    /* border: 1px solid; */
    transform-style: preserve-3d;
    position: relative;
    transition:5s;
    /* 之所以设置相对定位，是因为子绝父相 */
    animation: rotate 5s infinite linear;
}

2.4  container悬停的视觉效果设置

.container:hover{
    /* 当鼠标移入时，改变视角 */
    transform: rotateY(180deg) rotateX(180deg);
}

2.5  container下子元素div进行相关位置背景设置，子元素div相当于父元素container是绝对定位。

.container div{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    transition: 1s;
    background-color: #fff;
}

2.6  现在书写魔方各个面的背景图以及旋转角度等设置

.container div:nth-child(1),
.container div:nth-child(7){
    background: url('../images/img1.jpg') no-repeat center/cover white;
    transform: translateZ(75px);
}
 
.container:hover div:nth-child(1){
    transform: translateZ(200px);
}
 
.container div:nth-child(2),
.container div:nth-child(8){
    background: url('../images/img2.jpg') no-repeat center/cover white;
    transform: rotateX(-180deg) translateZ(75px);
}
 
.container:hover div:nth-child(2){
    transform: rotateX(-180deg) translateZ(200px);
}
 
.container div:nth-child(3),
.container div:nth-child(9){
    background: url('../images/img3.jpg') no-repeat center/cover white;
    transform: rotateX(90deg) translateZ(75px);
}
 
.container:hover div:nth-child(3){
    transform: rotateX(90deg) translateZ(200px);
}
 
.container div:nth-child(4),
.container div:nth-child(10){
    background: url('../images/img4.jpg') no-repeat center/cover white;
    transform: rotateX(-90deg) translateZ(75px);
}
 
.container:hover div:nth-child(4){
    transform: rotateX(-90deg) translateZ(200px);
}
 
.container div:nth-child(5),
.container div:nth-child(11){
    background: url('../images/img5.jpg') no-repeat center/cover white;
    transform: rotateY(90deg) translateZ(75px);
}
 
.container:hover div:nth-child(5){
    transform: rotateY(90deg) translateZ(200px);
}
 
.container div:nth-child(6),
.container div:nth-child(12){
    background: url('../images/img6.jpg') no-repeat center/cover white;
    transform: rotateY(-90deg) translateZ(75px);
}
 
.container:hover div:nth-child(6){
    transform: rotateY(-90deg) translateZ(200px);
}

2.7  CSS里面使用动画分为2步，定义动画和使用动画

@keyframes rotate{
    0%{
        transform: rotateY(0deg) rotateX(0deg);
    }
    100%{
        transform: rotateY(360deg) rotateX(360deg);
    }
}

HTML和CSS已编写结束，images里面的图片可以设置自己喜欢的图片，自己在网页上展示吧