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

yummyH

于 2017-08-29 09:45:35 发布

阅读量2.5k

点赞数 1

分类专栏： css 文章标签： css3 css 动画 animation

本文链接：https://blog.csdn.net/u014541501/article/details/77666763

版权

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

结果示例图：

示例代码：

.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) translate