zoukankan      html  css  js  c++  java
  • 网页特效:用CSS3制作3D图片立方体旋转特效

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>CSS3制作3D图片立方体旋转特效 - 站长素材</title>
    
    <style type="text/css">
     
    html{
        background:linear-gradient(#ff0 0%,#F00 80%);
        height: 100%;   
    }
     
    .wrap{
        width: 650px;
        height: 200px;
        margin: 150px 360px;
        position: relative;
         
    }
    .cube{
        width: 200px;
        height: 200px;
        margin: 0 auto;
        transform-style: preserve-3d;
        transform: rotateX(-30deg) rotateY(-80deg);
        -webkit-animation: rotate 20s infinite;
        animation-timing-function: linear;
    }
    @-webkit-keyframes rotate{
        from{transform: rotateX(0deg) rotateY(0deg);}
        to{transform: rotateX(360deg) rotateY(360deg);}
    }
    .cube div{
        position: absolute;
        width: 200px;
        height: 200px;
        opacity: 0.8;
        transition: all .4s;
    }
    .pic{
        width: 200px;
        height: 200px;
    }
    .cube .out_front{
        transform: rotateY(0deg) translateZ(100px);
    }
    .cube .out_back{
        transform: translateZ(-100px) rotateY(180deg);
    }
    .cube .out_left{
        transform: rotateY(90deg) translateZ(100px);
    }
    .cube .out_right{
        transform: rotateY(-90deg) translateZ(100px);
    }
    .cube .out_top{
        transform: rotateX(90deg) translateZ(100px);
    }
    .cube .out_bottom{
        transform: rotateX(-90deg) translateZ(100px);
    }
    .cube span{
        display: bloack;
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50px;
        left: 50px;
    }
    .cube .in_pic{
        width: 100px;
        height: 100px;
    }
    .cube .in_front{
        transform: rotateY(0deg) translateZ(50px);
    }
    .cube .in_back{
        transform: translateZ(-50px) rotateY(180deg);
    }
    .cube .in_left{
        transform: rotateY(90deg) translateZ(50px);
    }
    .cube .in_right{
        transform: rotateY(-90deg) translateZ(50px);
    }
    .cube .in_top{
        transform: rotateX(90deg) translateZ(50px);
    }
    .cube .in_bottom{
        transform: rotateX(-90deg) translateZ(50px);
    }
    .cube:hover .out_front{
        transform: rotateY(0deg) translateZ(200px);
    }
    .cube:hover .out_back{
        transform: translateZ(-200px) rotateY(180deg);
    }
    .cube:hover .out_left{
        transform: rotateY(90deg) translateZ(200px);
    }
    .cube:hover .out_right{
        transform: rotateY(-90deg) translateZ(200px);
    }
    .cube:hover .out_top{
        transform: rotateX(90deg) translateZ(200px);
    }
    .cube:hover .out_bottom{
        transform: rotateX(-90deg) translateZ(200px);
    }
    </style>
    
    </head>
    <body>
    <!--/*外层最大容器*/-->
    <div class="wrap">
    <!--    /*包裹所有元素的容器*/-->
    <div class="cube">
        <!--前面图片 -->
        <div class="out_front">
            <img src="../aimg/食材1.jpg"  class="pic">
        </div>
        <!--后面图片 -->
        <div class="out_back">
            <img src="../aimg/食材2.jpg"  class="pic">
        </div>
        <!--左图片 -->
        <div class="out_left">
            <img src="../aimg/食材3.jpg"  class="pic">
        </div>
        <div class="out_right">
            <img src="../aimg/食材4.jpg" class="pic">
        </div>
        <div class="out_top">
            <img src="../aimg/食材5.jpg"  class="pic">
        </div>
        <div class="out_bottom">
            <img src="../aimg/食材6.jpg"  class="pic">
        </div>
        <!--小正方体 -->
        <span class="in_front">
            <img src="../aimg/食材7.jpg" class="in_pic" />
        </span>
        <span class="in_back">
             <img src="../aimg/食材8.jpg" class="in_pic" />
        </span>
        <span class="in_left">
            <img src="../aimg/食材9.jpg" class="in_pic" />
        </span>
        <span class="in_right">
            <img src="../aimg/食材10.jpg" class="in_pic" />
        </span>
        <span class="in_top">
            <img src="../aimg/食材11.jpg" class="in_pic" />
        </span>
        <span class="in_bottom">
            <img src="../aimg/食材12.jpg" class="in_pic" />
        </span>
    </div>
    </div>
  • 相关阅读:
    天兔(Lepus)监控系统慢查询分析平台安装配置
    java怎么用一行代码初始化ArrayList
    yum命令不能使用的相关错误
    【转】Android APP性能测试
    【转】Java经典问题算法大全
    [转]java中Map,List与Set的区别
    关于编写性能高效的javascript事件的技术
    ESLint 规则
    HTML5 使用application cache 接口实现离线数据缓存
    qunit 前端脚本测试用例
  • 原文地址:https://www.cnblogs.com/xiaofox0018/p/6035294.html
Copyright © 2011-2022 走看看