3D正方体旋转Css3动画
文章 4029 0 0 0
发布时间:2018年08月28日

概述

在早开始就学习了css3动画,但是工作原因这个动画在实际开发中却很少去使用,只是ie这个初恋实在是无法恭维,好了我在这个写了一个css3正方体的旋转动画

一、主要技术剖析:

html基本标签
css样式的美化,还有必要的定位元素
运用了css3的舞台元素
css3的keyframes动画
css3的旋转位移

二、html标签

<div class="box">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>

三、css样式美化

{
    margin:0;
    padding: 0;
    list-style: none;
}
.box ul{
    position: relative;
    width: 100px;
    height: 100px;
    margin:200px auto;
    /transform:perspective(500px) rotateY(-45deg);*/
    transform-style: preserve-3d;
    animation: rout 30s infinite linear;
}
.box ul li{
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    position: absolute;
}
.box ul li:nth-child(1){
    background: #000;
    color: #fff;
    left: -100px;
    transform-origin: right;
    transform: rotateY(90deg);
}
.box ul li:nth-child(2){
    background: #000;
    color: #fff;
}
.box ul li:nth-child(3){
    background: #000;
    color: #fff;
    top: -100px;
    transform-origin: bottom;
    transform: rotateX(-90deg);
}
.box ul li:nth-child(4){
    background: #000;
    color: #fff;
    right: -100px;
    transform-origin: left;
    transform: rotateY(-90deg);
}
.box ul li:nth-child(5){
    background: #000;
    color: #fff;
    top: 100px;
    left: 0;
    transform-origin: top;
    transform: rotateX(90deg);
}
.box ul li:nth-child(6){
    background: #f00;
    color: #fff;
    left: 0;
    top: 0;
    transform: translateZ(100px);
}

四、keyframes

@keyframes rout{
 0%{
     transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
  }
 100%{
     transform: rotateY(360deg) rotateX(360deg) rotateZ(0deg);
  }
}

最后大功告成!

3D正方体旋转Css3动画

评论专区
Q群
Q群
Q群
反馈
纠错