您的位置：首页 > Web前端 > CSS

CSS实现旋转魔方

2019-08-27 17:09 513 查看

文章目录

一、效果图
二、思路解析
三、源码
四、网站推荐

一、效果图

只是做了简单的旋转魔方，使用HTML+CSS就够了！

二、思路解析

首先要有外层容器，动画加在外层容器上面，就能使内部所有的元素跟着一起动；
外层容器必须具有一定的宽度和高度，这样才能使其绕着自己的中心点旋转（默认旋转方式）；
关于内部div的变换，实际上一开始，所有的内部div都和外部容器在同一平面上。所以我们只需要掌握这一点就能够轻松找准 6个面的位置。
（在这里，我是这样写的）
```
【X横轴，指向屏幕右侧；Y纵轴，指向屏幕下方；Z竖轴，指向屏幕内部的轴】
```
第1面：相对于原来的位置沿着
```
Z轴
```
平移
```
100px
```
第2面：第1面的对立面，相对于原来的位置沿着Z轴平移
```
-100px
```
第3面：相对于原来的位置沿着
```
Z轴
```
平移
```
100px
```
，同时要沿着
```
X轴
```
旋转
```
90°
```
，从而和原来的平面垂直
第4面：第3面的对立面，和第3面平行，所以相对于原来的位置沿着
```
Z轴
```
平移
```
-100px
```
，同时要沿着X轴旋转
```
-90°
```
，从而和原来的平面垂直
第5面：相对于原来的位置沿着
```
Z轴
```
平移
```
100px
```
，同时要沿着
```
Y轴
```
旋转
```
90°
```
，从而和原来的平面垂直
第6面：第5面的对立面，和第5面平行，所以相对于原来的位置沿着
```
Z轴
```
平移
```
-100px
```
，同时要沿着
```
Y轴
```
旋转
```
90°
```
，从而和原来的平面垂直
最后让外部容器联通内部div沿着中心点旋转。

三、源码

html代码

<body>
<div class="box">
<div class="dv1">1</div>
<div class="dv2">2</div>
<div class="dv3">3</div>
<div class="dv4">4</div>
<div class="dv5">5</div>
<div class="dv6">6</div>
</div>
</body>

css代码

html,
body {
height: 100%;
width: 100%;
background-color: #FFDEE9;
background-image: linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 33%, #ffffff 60%, #f9f3d1 100%);
background-size: 100%;
background-repeat: no-repeat;
}

.box {
width: 200px;
height: 200px;
position: relative;
top: 300px;
left: 45%;
transform-style: preserve-3d;
animation: move 5s linear infinite;
}

.box:hover {
animation-play-state: paused;
}

.box>div {
position: absolute;
display: inline-block;
width: 200px;
height: 200px;
opacity: 0.8;
text-align: center;
font-size: 100px;
line-height: 200px;
color: #333;
cursor: pointer;
}

.box>.dv1 {
background-color: #21D4FD;
background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
transform: translateZ(100px)
}
/* 1的对立面 */

.box>.dv2 {
background-color: #FFE53B;
background-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 74%);
transform: translateZ(-100px)
}

.box>.dv3 {
background-color: #08AEEA;
background-image: linear-gradient(0deg, #08AEEA 0%, #2AF598 100%);
transform: rotateX(90deg) translateZ(100px)
}
/* 3的对立面 */

.box>.dv4 {
background-color: #85FFBD;
background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
transform: rotateX(90deg) translateZ(-100px)
}

.box>.dv5 {
background-color: #85FFBD;
background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
transform: rotateY(90deg) translateZ(100px)
}
/* 5的对立面 */

.box>.dv6 {
background-color: #A9C9FF;
background-image: linear-gradient(180deg, #A9C9FF 0%, #FFBBEC 100%);
transform: rotateY(90deg) translateZ(-100px)
}

/* Safari and Chrome */
@-webkit-keyframes move {
from {
transform: rotate3d(0, 0, 0, 0);
}
to {
transform: rotate3d(1, 1, 1, 360deg)
}
}
/* FireFox */
@-moz-keyframes move {
from {
transform: rotate3d(0, 0, 0, 0);
}
to {
transform: rotate3d(1, 1, 1, 360deg)
}
}
/* Opera */
@-o-keyframes move {
from {
transform: rotate3d(0, 0, 0, 0);
}
to {
transform: rotate3d(1, 1, 1, 360deg)
}
}

四、网站推荐

渐变色网站：https://www.grabient.com/
使用很简单，只需要赋值css代码，粘贴到样式文件就可以了！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航