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

程序员文章站 2024-01-23 23:25:22

...

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

结果示例图：

示例代码：

.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:

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