HTML+CSS实战操作旋转魔方

今天以纯HTML和CSS实现3D旋转魔方，可以搭建服务器上，发给自己关心的人，咳，收获了感动。整挺好~~~

1、实现效果展示

魔方实现hover效果，悬停相应魔方面会打开，如图

2、实现过程

前期准备：

设置三个文件夹：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">

2、CSS代码片段

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

*{margin: 0;padding: 0;
}

弹性盒布局设置：

魔方显然放在网页中心才显得好看，如何实现？传统布局——基于盒子模型，依赖 display 属性、position属性、float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
并且，传统布局代码冗长，出错率高，要时刻注意清除浮动或者在进行绝对定位时给父元素添加相对定位。否则就容易造成页面布局混乱。但是，Flex布局就可以避免这种情况：Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

详解：https://blog.csdn.net/a1015895218/article/details/115355465

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里面的图片可以设置自己喜欢的图片，自己在网页上展示吧。

呜呜，看到这都还不点赞加收藏？？？