实现过程
前期准备：
设置三个文件夹：css、html、images；分别放置文件index.css、index.html、images
1、HTML代码片段
1.1 放置图片肯定需要一个容器，毋庸置疑，最外层的容器为container
<divclass="container"></div>
1.2 通过分析，魔方有6个面，但是实现hover的时候有一个分解的效果，总共有12个面
嗯，有点意思，直接在container容器里放置12div元素，div*12 Tab即可
<divclass="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><linkrel="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: rotate5sinfinitelinear; }
2.4 container悬停的视觉效果设置
.container:hover{ /* 当鼠标移入时，改变视角 */transform: rotateY(180deg) rotateX(180deg); }
2.5 container下子元素div进行相关位置背景设置，子元素div相当于父元素container是绝对定位。
.containerdiv{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #fff;transition: 1s; background-color: #fff;}
2.6 现在书写魔方各个面的背景图以及旋转角度等设置
.containerdiv:nth-child(1), .containerdiv:nth-child(7){ background: url('../images/img1.jpg') no-repeatcenter/coverwhite; transform: translateZ(75px); } .container:hoverdiv:nth-child(1){ transform: translateZ(200px); } .containerdiv:nth-child(2), .containerdiv:nth-child(8){ background: url('../images/img2.jpg') no-repeatcenter/coverwhite; transform: rotateX(-180deg) translateZ(75px); } .container:hoverdiv:nth-child(2){ transform: rotateX(-180deg) translateZ(200px); } .containerdiv:nth-child(3), .containerdiv:nth-child(9){ background: url('../images/img3.jpg') no-repeatcenter/coverwhite; transform: rotateX(90deg) translateZ(75px); } .container:hoverdiv:nth-child(3){ transform: rotateX(90deg) translateZ(200px); } .containerdiv:nth-child(4), .containerdiv:nth-child(10){ background: url('../images/img4.jpg') no-repeatcenter/coverwhite; transform: rotateX(-90deg) translateZ(75px); } .container:hoverdiv:nth-child(4){ transform: rotateX(-90deg) translateZ(200px); } .containerdiv:nth-child(5), .containerdiv:nth-child(11){ background: url('../images/img5.jpg') no-repeatcenter/coverwhite; transform: rotateY(90deg) translateZ(75px); } .container:hoverdiv:nth-child(5){ transform: rotateY(90deg) translateZ(200px); } .containerdiv:nth-child(6), .containerdiv:nth-child(12){ background: url('../images/img6.jpg') no-repeatcenter/coverwhite; transform: rotateY(-90deg) translateZ(75px); } .container:hoverdiv:nth-child(6){ transform: rotateY(-90deg) translateZ(200px); }
2.7 CSS里面使用动画分为2步，定义动画和使用动画
@keyframesrotate{ 0%{ transform: rotateY(0deg) rotateX(0deg); } 100%{ transform: rotateY(360deg) rotateX(360deg); } }
HTML和CSS已编写结束，images里面的图片可以设置自己喜欢的图片，自己在网页上展示吧
