CSS简单魔方效果
首先我们在body里面下我们需要的标签元素
<body>
<!--这里也可以用div写 -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
写好后我们在style标签里写我们所需要的的样式
先给ul设置我们所需要的样式让它相对页面居中
<style>
ul {
width: 250px;
height: 250px;
transform-style: preserve-3d;//3d效果
position: relative;
/*在这里给父级设置相对定位是为了后面给li设置
绝对定位时让li以ul的左顶点进行位置偏移*/
margin: 300px auto;
padding: 0; //这里我们给ul设置内边距为0
}
</style>
给父级设置好样式后我们现在来给li设置样式，因为在鼠标还没有触碰到是只是一张图片，所以这里我们要给li背景图片，这里这里我是写在标签选择器里的，刚开始每个li都堆叠在一起所以只会看到一张图片。
<style>
li {
position: absolute;
width: 250px;
height: 250px;
list-style: none;//去除li前面的符号
transform-origin: center center;//旋转的中心点
background-image: url(web/9.jpg);
background-size: 100% 100%;
}
</style>
现在我们要个每个li都写一个样式，因为每个li的位置都不同，需要调整位置，所以必须将每一个li都分开写。在这里我就不一一写了，在最后会有源码。
在预览图中我们看到了它是要鼠标悬停在在图片上才会触发没所以这里我们也要用到伪类选择器。
<style>
ul:hover{
transition: all 1s ;//过渡动画，延时1s
animation: run 2s linear infinite ;
}
</style>
在我们用到animation动画是我们还要写帧动画。写了关键帧之后它才会动起来，不然animation设置了也是无效的。
<style>
@keyframes run{
from{
transform: rotateZ(0deg) ;
}
to{
transform: rotateZ(360deg) ;
}
}
</style>
需要注意的是，我们要在body里面调整我们的perspective-origin（也就是我们所观看的视角）让我们的魔方看到的是正方体的。
下面是源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:root,body{
width: 100%;
height: 100%;
}
body{
perspective: 800px;
background-color: black;
perspective-origin: center 0 ;
}
ul {
width: 250px;
height: 250px;
transform-style: preserve-3d;
position: relative;
margin: 300px auto;
padding: 0;
}
li {
position: absolute;
width: 250px;
height: 250px;
list-style: none;
transform-origin: center center;
background-image: url(web/9.jpg);
background-size: 100% 100%;
}
ul:hover{
transition: all 1s ;
animation: run 2s linear infinite ;
}
ul:hover li:nth-of-type(1){
transition: all 2s 1s;
background-image: url(web/2.jpg);
background-size: 100% 100%;
transform: rotateX(50deg) translateZ(180px);
}
ul:hover li:nth-of-type(2){
transition: all 2s 1s;
background-image: url(web/3.jpg);
background-size: 100% 100%;
transform: rotateX(50deg) translateZ(-180px);
}
ul:hover li:nth-of-type(3){
transition: all 2s 1s;
background-image: url(web/4.jpg);
background-size: 100% 100%;
transform: rotateX(50deg) rotateY(92deg) translateZ(-180px);
}
ul:hover li:nth-of-type(4){
transition: all 2s 1s;
background-image: url(web/5.jpg);
background-size: 100% 100%;
transform: rotateX(50deg) rotateY(-92deg) translateZ(-180px);
}
ul:hover li:nth-of-type(5){
transition: all 2s 1s;
background-image: url(web/6.jpg);
background-size: 100% 100%;
transform: rotateX(140deg) rotateY(0deg) translateZ(180px);
}
ul:hover li:nth-of-type(6){
transition: all 2s 1s;
background-image: url(web/7.jpg);
background-size: 100% 100%;
transform: rotateX(140deg) rotateY(0deg) translateZ(-180px);
}
@keyframes run{
from{
transform: rotateZ(0deg) ;
}
to{
transform: rotateZ(360deg) ;
}
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>