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>
  • 相关阅读:
    暑假集训单切赛第二场 UVA 10982 Troublemakers
    暑假集训单切赛第一场 POJ 2309 BST(找规律的题)
    暑假集训单切赛第一场 CF 191A Dynasty Puzzles
    暑假集训单切赛第一场 CF 266E More Queries to Array(线段树+二项式展开式)
    暑假集训单切赛第一场 UVA 1737 Mnemonics and Palindromes 3
    大一暑假集训第六周第一场单切赛
    POJ 1486 Sorting Slides(寻找必须边)
    【机器学习】梯度下降法的相关介绍
    Linux下使用Tmux提高终端环境下的效率
    Fedora23安装以后要做的优化配置
  • 原文地址:https://www.cnblogs.com/xiaofox0018/p/6035294.html
Copyright © 2011-2022 走看看