# 原生 html+css+javascript 实现旋转立方体

**Repository Path**: is666a/Rotate-Cube

## Basic Information

- **Project Name**: 原生 html+css+javascript 实现旋转立方体
- **Description**: 原生 html+css+javascript 实现旋转立方体
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2021-10-11
- **Last Updated**: 2022-07-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 原生 html+css+javascript 实现旋转立方体

## 基础结构编写

i. 正方体有六个面
![](./images/1.png)
```html
<div class="my-box">
    <div class="box box-1">1</div>
    <div class="box box-2">2</div>
    <div class="box box-3">3</div>
    <div class="box box-4">4</div>
    <div class="box box-5">5</div>
    <div class="box box-6">6</div>
</div>
```

ii. 第6个面和第1个面在二维上是重叠的

iii. 以第1个面为中心，位置关系如下图所示
![](./images/2.png)

```css
.box-1 {
    left: 0;
    top: 0;
}

.box-2 {
    left: -100%;
    top: 0;
    /* transform-origin: right; */
    /* transform: rotateY(90deg); */
}

.box-3 {
    left: 0;
    top: 100%;
    /* transform-origin: top; */
    /* transform: rotateX(90deg); */
}

.box-4 {
    left: 100%;
    top: 0;
    /* transform-origin: left; */
    /* transform: rotateY(-90deg); */
}

.box-5 {
    left: 0;
    top: -100%;
    /* transform-origin: bottom; */
    /* transform: rotateX(-90deg); */
}

.box-6 {
    left: 0;
    top: 0;
    /* transform: translateZ(200px); */
}
```

v. 然后对侧边4个面设置旋转中心进行选择/折叠（屏幕相对于正方体俯视图）

![](./images/3.png)



## transform 属性说明

1. [`transform-style`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-style)
    - `flat`: `2d`
    - `preserve-3d`: `3d`

2. [`transform-origin`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin): 设置旋转中心

3. [`transform`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform)
    - `translate`: 沿 X、Y、Z 轴平移
    - `rotate`: 旋转
    - `scale`: 放大缩小
    - `translate`
    - `transform`
    - `skew`


## 旋转

![](./拖拽旋转.png)