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

最新推荐文章于 2022-01-25 00:20:39 发布

yummyH

最新推荐文章于 2022-01-25 00:20:39 发布

阅读量1.5k

点赞数 1

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

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

版权

css 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

css3

1 篇文章 0 订阅

订阅专栏

< 二 > 实现一个转动的立体六边形

结果示例图（因为录制工具的问题这个gif显得有些卡顿，在实际网页中并不会）：

示例代码：

.test{
    font-size:20px;
}
.container{
    width: 500px;
    height: 420px;
    position: relative;
    margin: 0 auto;
    padding-top: 200px;
    perspective: 2000px;
    -webkit-perspective: 2000px;
    perspective-origin-y: 100px;
    -webkit-perspective-origin-y: 100px;
}
.carousel{
    width: 100%;
    height: 100%;
    position: absolute; 
    transform-style: preserve-3d;
    transform: translateZ(-400px) rotateY(0deg);
    animation:rotate0 10s infinite linear; /* 添加动画名叫rotate0，持续10s,以线性持续运动*/
}
.carousel div{
    width:350px;
    height:250px;
    background-color: rgba(72,83,121,0.5);
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -150px;
    font-size:80px;
    color:red;
    display:flex; 
    align-items:center;/*垂直居中*/ 
    justify-content: center;/*水平居中*/
}
.rotate-0{
    transform: rotateY(0deg) translateZ(400px);
}
.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);
}
@keyframes rotate0{ /* 动画rotate0 */
    from{
        transform: translateZ(-400px) rotateY(360deg);
    }to{
        transform: translateZ(-400px) rotateY(0deg);
    }
}

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

注：
animation属性是一个简写属性，它有六个属性，分别是：
* animation-name：动画名称
* animation-duration：完成所定义动画曲线持续时间
* animation-timing-function：动画曲线
* animation-delay：动画开始之前的延迟时间
* animation-iteration-count：动画播放次数
* animation-direction：是否轮流反向播放动画

animation的兼容性：