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;                                            /.........完整代码请登录后点击上方下载按钮下载查看