css实现不同的三维立方体滚动动画效果代码-html代码-BFW代码库

css实现不同的三维立方体滚动动画效果代码

代码语言：html

所属分类：三维

代码描述：css实现不同的三维立方体滚动动画效果代码

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

<!DOCTYPE html>
<html>

        <head>
                <meta charset="UTF-8">
                <title></title>
                <style type="text/css">
                        h1 { text-align: center;  }
                        h2 { font-family: "微软雅黑"; line-height:100px;}

                        .box{ width: 200px; height: 200px; padding: 100px; display: inline-block; border: 1px solid green; text-align: center;
                                perspective: 400px;
                        }
                        
                        .box:hover #div{ transform: rotateY(-360deg);}
                                
                        .div div{ width: 200px; height: 200px; position: absolute; top: 0px; left: 0px; opacity: 0.6;
                                border-radius: 50px; border: 1px solid white;
                                transform-origin: center center -100px;
                        }       
                
                        .div1{ font: 50px/200px "微软雅黑"; color: white; position: relative; 
                                transform-style:preserve-3d;
                                animation: mupiao 3s infinite linear running;
                                transform-origin: center 100px -100px;
                        }
                        
                        .div2{ font: 50px/200px "微软雅黑"; color: white; position: relative; 
                                transform-style:preserve-3d;
                                animation: mupiao2 3s infinite linear running;
                                transform-origin: center 100px -100px;
                        }
                        
                        .div3{ font: 50px/200px "微软雅黑"; color: white; position: relative; 
                                transform-style:preserve-3d;
                                transition: 6s all; 
                                animation: mupiao3 6s infinite linear running;
                                transform-origin: center 100px -100px;
                        }
                        
                        .div div:nth-of-type(1){
                                background: red;
                                transform: rotateY(0deg);
                        }
                        .div div:nth-of-type(2){
                                background: green;
                                transform: rotateY(90deg);
                        }
                        .div div:nth-of-type(3){
                                background: blue;
                                transform: rotateX(180deg);
                        }
                        .div div:nth-of-type(4){
                                background: purple;
                                transform: rotateY(270deg);
                        }
                        .div div:nth-of-type(5){
                                background: yellow;
                                transform: rotateX(90deg);
                        }
                        .div div:nth-of-type(6){
                                background: cyan;
                                transform: rotateX(270deg);
                        }
                        
                        
                        
                        .div4{ font: 50px/200px "微软雅黑"; color: white; position: relative; 
                                transform-style:preserve-3d;
                                animation: mupiao4 6s infinite linear running;
                                transform-origin: center 100px -100.........完整代码请登录后点击上方下载按钮下载查看