zoukankan      html  css  js  c++  java
  • 基于css3的3D立方体旋转特效

    今天给大家分享一款基于css3的3D立方体旋转特效。这款特效适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。效果图如下 :

    在线预览   源码下载

    实现的代码。

    html代码:

      <div class="wrap">
            <div class="box1 box">
                1</div>
            <div class="box2 box">
                2</div>
            <div class="box3 box">
                3</div>
            <div class="box4 box">
                4</div>
            <div class="box5 box">
                5</div>
            <div class="box6 box">
                6</div>
        </div>

    css3代码:

    *{margin: 0;padding: 0;}
    html,body{height: 100%;background: black;}
    .wrap{
          height: 100%;position: relative;
          -webkit-transform-style:preserve-3d;
          -webkit-perspective:0px;
    
          -moz-transform-style:preserve-3d;
          -moz-perspective:0px;
    
          -webkit-animation:mydhua 5s ease infinite;
          -moz-animation:mydhua 5s ease infinite;
    
         
    
    }
    .box{width: 200px;height: 200px;position: absolute;top: 50%;left: 50%;
         margin:-100px 0 0 -100px; line-height: 200px;text-align: center;font-size: 48px;color: white;
            }
    .box1{
        -webkit-transform:rotatey(90deg) translatez(-100px);
        -moz-transform:rotatey(90deg) translatez(-100px);
        background: rgba(128,0,128,.5);
    }
    .box2{
        -webkit-transform:rotatey(90deg) translatez(100px);
        -moz-transform:rotatey(90deg) translatez(100px);
        background: rgba(255,0,255,.5);
    }
    .box3{
        -webkit-transform:rotatex(90deg) translatez(100px);
        -moz-transform:rotatex(90deg) translatez(100px);
        background: rgba(255,153,204,.5);
    }
    .box4{
        -webkit-transform:rotatex(90deg) translatez(-100px);
        -moz-transform:rotatex(90deg) translatez(-100px);
        background: rgba(0,204,255,.5);
    }
    .box5{
        -webkit-transform: translatez(-100px);
        -moz-transform:translatez(-100px);
        background: rgba(153,204,255,.5);
    }
    .box6{
        -webkit-transform: translatez(100px);
        -moz-transform:translatez(100px);
        background: rgba(0,255,255,.5);
    }
    
    @-webkit-keyframes mydhua{
    
        0%{-webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);-webkit-transform-origin: center center;}
        100%{-webkit-transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg);-webkit-transform-origin: center center; }
    }
    @-moz-keyframes mydhua{
    
        0%{-moz-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);-webkit-transform-origin: center center;}
        100%{-moz-transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg); -webkit-transform-origin: center center;}
    }

    via:http://www.w2bc.com/Article/16554

  • 相关阅读:
    已解决[Authentication failed for token submission,Illegal hexadecimal charcter s at index 1]
    远程快速安装redis和远程连接
    远程快速安装mysql
    Swiper的jquery动态渲染不能滑动
    微服务架构攀登之路(三)之gRPC入门
    微服务架构攀登之路(二)之RPC
    微服务架构攀登之路(一)之微服务初识
    Go语言中new和make的区别
    Go语言实战爬虫项目
    Go语言系列(十一)- 日志收集系统架构
  • 原文地址:https://www.cnblogs.com/liaohuolin/p/4218236.html
Copyright © 2011-2022 走看看