纯css3实现立方体旋转效果

最新推荐文章于 2020-03-09 20:31:16 发布

戏里戏外。

最新推荐文章于 2020-03-09 20:31:16 发布

阅读量643

点赞数 1

分类专栏：前端文档

本文链接：https://blog.youkuaiyun.com/hjw453321854/article/details/79072376

版权

前端文档专栏收录该内容

13 篇文章

订阅专栏

HTML结构

<div class="wrap">
    <div class="cube">
        <div class="front">front</div>
        <div class="back">back</div>
        <div class="top">top</div>
        <div class="bottom">bottom</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</div>

CSS样式

.wrap {
    /*perspective:1000px;
    perspective-origin: 50% 50%;*/ /*扁平化旋转*/
}
.cube {
    position: relative;
    left:500px;top:100px;
    width: 200px;
    height:200px;
    transform-style: preserve-3d;
}
.cube div {
    border:1px solid #999;
    position: absolute;
    width: 200px;
    height: 200px;
}
.back {

    transform: translateZ(-100px) rotateY(180deg);
}
.right {

    transform: rotateY(-270deg) translateX(100px);
    transform-origin: top right;
}
.left {

    transform: rotateY(270deg) translateX(-100px);
    transform-origin: center left;
}
.top {

    transform: rotateX(-90deg) translateY(-100px);
    transform-origin: top center;
}
.bottom {

    transform: rotateX(90deg) translateY(100px);
    transform-origin: bottom center;
}
.front {

    transform: translateZ(100px);
}
@-webkit-keyframes spin {
    form { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
}
 
.cube {
    -webkit-animation: spin 5s  linear infinite;
    /*-webkit-animation-fill-mode:forwards;*/  /*循环一次*/
}