H5/C3实践(2) --3D导航栏&旋转木马

6、3D导航栏

1. 创建两个盒子

<div class="box">
	<div class-"front">111111</div>
	<div class="back" >222222</div>
</div>

.box {
    position: relative;
    width: 225px;
    height: 225px;
    border-radius: 50%;
    transform-style: preserve-3d;
    background-color: rgb(177, 174, 158);
    transition: all 1s linear 0.1s; 
}
.front,.back {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 200px;
    width: 200px;
    margin: -102px 0 0 -102px; 
    border-radius: 50%;
    
}
.front {
    overflow: hidden;
    z-index: 1;
}
.back {
    font-size: 30px;
    text-align: center;
    color: #000;
    transform: rotateY(180deg);
    background-color: rgb(8, 233, 138);
}
.box:hover {
    transform: rotateY(180deg);
}

• box父盒子里面包含前后两个子盒子。
• box是翻转的盒子front是前面盒子back是后面盒子。

2. 将盒子设置定位，并且重叠。

3. 将被底部的盒子沿X轴旋转-90度

4. 将父级盒子沿X轴旋转90度

7、旋转木马

原理：确定一根主轴，所有图片围绕主轴转，图片距离主轴的长度相同。

1. 创建盒子

<section>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</section>

2. 将各个盒子与中心线的距离拉开（距离相同）

.photos div:nth-child(2) {
  transform: rotateY(40deg) translateZ(400px);
}

3. 先旋转，再移动距离。

举例：

<section class="photos1">
	<div><img src="photos/1/1.jpg" alt="照片"></div>
	<div><img src="photos/1/2.jpg" alt="照片"></div>
	<div><img src="photos/1/3.jpg" alt="照片"></div>
</section>

section {
    position: relative;
    width: 300px;
    height: 200px;
    margin: 20px auto;
    transform-style: preserve-3d;
    animation: rotateY 20s linear  infinite;
}
section div {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
section div img {
    width: 100%;
    height: 100%;
    transition: all 0.5s linear 0.1s;
}
section div img:hover {
    transform: scale(1.2);
}


.photos1 {
    background: url(../photos/1/main.jpg);
    background-size: 100%;
    z-index: 4;
}
.photos1 div:nth-child(1) {
    transform: rotateY(0deg) translateZ(200px);
}
.photos1 div:nth-child(2) {
    transform: rotateY(120deg) translateZ(200px);
}
.photos1 div:nth-child(3) {
    transform: rotateY(240deg) translateZ(200px);
}