css实现正方体骰子旋转动画效果代码-html代码-BFW代码库

css实现正方体骰子旋转动画效果代码

代码语言：html

所属分类：三维

代码描述：css实现正方体骰子旋转动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        /*简单清除默认样式*/
    *{
        margin: 0 auto;
        padding: 0;
    }
    
    /*动画关键帧，翻滚吧！牛宝宝*/
    @keyframes move{
        0%{
            transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) ;
        }
        100%{
            transform:rotateX(720deg) rotateY(360deg) rotateZ(360deg);
        }
    }
    
    /*来个渐变的背景色*/
    html{
        background:linear-gradient(#29f9f0 0%, #000 80%);
        height:100%;
    }
    
    div.wrap{
        margin-top: 200px;    /*上外边距设置*/
        width: 200px;         /*给他一个宽度*/
        perspective: 1000px;  /*景深设置，视图距元素的距离  相当于摄像机*/
    }
    
    .wrap>div.cube{
        width: 200px;                                               /*box设置宽度200像素*/
        height: 200px;                                              /*设置高度200像素*/
        position: relative;                                         /*开启相对定位，好让里面的元素开启定位时不会高度塌陷*/
        color: #ff92ff;                                             /*字体的颜色*/
        font-size: 36px;                                            /*字体大小*/
        font-weight: 100;                                           /*字体细小*/
        text-align: center;                                         /*文本字体左右居中*/
        line-height: 200px;                                         /*行高设置，这样文本就在比box中是上下居中*/
        transform-style: preserve-3d ;                              /*开启这个，表示所有元素在3D平面呈现*/
        transform: rotateX(-50deg) rotateY(-50deg) rotateZ(0deg);   /*一开始的角度，视觉上看一下*/
        animation: move 8s infinite linear;                         /*启动动画的名字、时长、无限循环、匀速播放*/
    }
    
    /*大的正方体的设置*/
    .cube>div{
        width: 100%;                              /*设置的宽度和父级一样*/
        height: 100%;                             /*设置的高度一样*/
        border: 10px solid #66daff;               /*边框设置*/
        border-radius: 20px.........完整代码请登录后点击上方下载按钮下载查看