利用 CSS3 实现一个转动立体六边形 <一>

<一>实现一个立体六边形

结果示例图：



示例代码：

.test{
font-size:20px;
}
.container{
width: 500px;
height: 420px;
position: relative;
margin: 0 auto;
padding-top: 200px;
perspective: 3000px;  /*perspective属性定义3D元素距视距的距离，以像素计*/
-webkit-perspective-origin-y: 330px;/*设置3D元素的基点位置*/
}
.carousel{
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;/*子元素保留其3D位置*/
transform: translateZ(-400px) rotateY(0deg);
}
.carousel div{
width:350px;
height:250px;
background-color: rgba(138,224,232,0.5);
display: block;
position: absolute;
left: 50%;
margin-left: -150px;
}
.rotate-0{
transform: rotateY(0deg) translateZ(400px);/* rotate定义旋转，rotateY定义沿Y轴旋转角度；translate定义转换，translateZ定义沿Z轴方向的转换 */
}
.rotate-1{
transform: rotateY(60deg) translateZ(400px);
}
.rotate-2{
transform: rotateY(120deg) translateZ(400px);
}
.rotate-3{
transform: rotateY(180deg) translateZ(400px);
}
.rotate-4{
transform: rotateY(240deg) translateZ(400px);
}
.rotate-5{
transform: rotateY(300deg) translateZ(400px);
}

<div id="test">
<div class="container">
<div id="carousel" class="carousel">
<div class="rotate-0"></div>
<div class="rotate-1"></div>
<div class="rotate-2"></div>
<div class="rotate-3"></div>
<div class="rotate-4"></div>
<div class="rotate-5"></div>
</div>
</div>
</div>

注意：

利用 CSS3 新特性实现的 3D 元素 在IE上兼容性并不是很好，目前 transform-style：preserve3d 不支持IE，以下备注：

以下是在http://caniuse.com上搜到的几个属性在不同浏览器兼容性对比图（绿色为完全兼容，浅绿色为兼容一大部分，黄色为兼容一小部分，红色为完全不兼容）：

transform-style:



transform:






 这就是如何去利用CSS3实现一个立体六边形，我们下一步就是如何让这个立体六边形能够转动起来，实现一个转动的立体六边形 

 链接：《利用
CSS3 实现一个转动立体六边形 <二>》