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

来源：互联网发布：出纳风险评估矩阵图编辑：程序博客网时间：2024/05/20 02:26

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

结果示例图：

示例代码：

.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 实现一个转动立体六边形 <二>》

阅读全文

1 0