为啥要写这篇博客嘞,一是因为我好久没更了,离我成为CSDN大佬的目标越来越远了,第二是某人昨天晚上跟我说要检验一下我的学习成果,所以嘞想做个旋转立方体给他,图片用的是俺们的头像。图片可换嗷~
好了,不说废话了,我要开始写了。手动狗头
一、思路
设立方体长宽高都为a.
立方体
- 首先写一个大的框架,再写六个子面 ,这些面都在一个平面内,然后我们通过旋转、位移等方式改变六个面的位置,从而形成一个完整的立方体。
- 立方体一共六个面,分别对应div1到div6。
div1–上面 沿着X轴旋转90度,沿着Z轴正向移动1/2a。
div2–下面 沿着X轴旋转-90度,沿着Z轴正向移动1/2a。
div3–右面 沿着Y轴旋转90度,沿着Z轴正向移动1/2a.
div4–里面 沿着Z轴反向移动1/2a。
div5–左面 沿着Y轴旋转-90度,沿着Z轴正向移动1/2a。
div6–外面 沿着z轴正向移动1/2a。
示意图如下(丑是丑了点,将就看吧)
旋转
用animation写
二、实现
1.构建框架
div1-div6就是我们的要做的旋转立方体的六个面,先构建出框架,一会在写样式。
2.构建立方体
选中所有元素,margin和padding都设置为零;
给container设置宽高各200px,设置margin上下150px,左右自适应;
选中所有container中的div设置样式 宽高和container一样都是200px;
给父元素container相对定位,子元素div绝对定位;
再给每一个小的div1-div6设置背景图片,并进行旋转移动操作形成立方体。
还可以设置透明度和圆角。
实现后如下图
3.旋转部分
旋转部分用animation 属性run 时间设置为2s 线性 播放次数设置为无限循环
animation: run 2s linear infinite
给父元素设置视角,子元素设置3d变换。
run 沿着Y轴旋转360度。
最终效果如下图:
三、代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旋转立方体</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
/*background: #000;*/
perspective: 800px;/*父元素设置视角*/
}
#container{
width: 200px;
height: 200px;
margin: 150px auto;
position: relative;
animation: run 2s linear infinite;
transform-style: preserve-3d;/*子元素3d变换*/
}
@keyframes run{
100%{
transform: rotateY(360deg);
}
}
#container div{
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
opacity: 0.8;
background-size: 100% 100%;
border-radius: 10px;
box-shadow: 0 0 50px white;
}
#div1{
background: url(img/1.jpg);
transform: rotateX(90deg) translateZ(100px);
}
#div2{
background: url(img/2.jpg);
transform: rotateX(-90deg) translateZ(100px);
z-index:1;
}
#div3{
background: url(img/3.jpg);
transform :rotateY(90deg) translateZ(100px);
}
#div4{
background: url(img/4.jpg);
transform: translateZ(-100px);
}
#div5{
background: url(img/5.jpg);
transform :rotateY(-90deg) translateZ(100px);
}
#div6{
background: url(img/6.jpg);
transform: translateZ(100px);
}
</style>
</head>
<body>
<div id="container">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
</div>
</body>
</html>