zoukankan      html  css  js  c++  java
  • 博客园添加旋转的正方体特效

    哇,这个旋转的正方体特效也十分好看呢

    参考链接:https://www.cnblogs.com/Trojan00/p/9497480.html

    效果展示

    具体步骤

    将代码复制即可

    代码如下:(在博客侧边栏公告(支持HTML代码)中粘贴即可

    <style>
            /*最外层容器样式*/
            .wrap {
                 100px;
                height: 100px;
                margin: 150px;
                position: relative;
            }
     
            /*包裹所有容器样式*/
            .cube {
                 50px;
                height: 50px;
                margin: 0 auto;
                transform-style: preserve-3d;
                transform: rotateX(-30deg) rotateY(-80deg);
                animation: rotate linear 20s infinite;
            }
     
            @-webkit-keyframes rotate {
                from {
                    transform: rotateX(0deg) rotateY(0deg);
                }
                to {
                    transform: rotateX(360deg) rotateY(360deg);
                }
            }
     
            .cube div {
                position: absolute;
                 200px;
                height: 200px;
                opacity: 0.8;
                transition: all .4s;
            }
     
            /*定义所有图片样式*/
            .pic {
                 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: block;
                 100px;
                height: 100px;
                position: absolute;
                top: 50px;
                left: 50px;
            }
     
            .cube .in_pic {
                 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>

    <!-- 外层最大容器 -->
    <div class="wrap">
    <!--包裹所有元素的容器-->
    <div class="cube">
    <!--前面图片 -->
    <div class="out_front">
    <img src="http://img5.imgtn.bdimg.com/it/u=142200704,2758129923&fm=26&gp=0.jpg" class="pic">
    </div>
    <!--后面图片 -->
    <div class="out_back">
    <img src="http://gss0.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/09fa513d269759ee707fb571b4fb43166d22df59.jpg" class="pic">
    </div>
    <!--左面图片 -->
    <div class="out_left">
    <img src="http://news.cableabc.com/ccqi2/userfiles/images/20170806083009131.jpeg" class="pic">
    </div>
    <!--右面图片 -->
    <div class="out_right">
    <img src="http://www.v3wall.com/wallpaper/medium/1412/medium_201412030817141790517.jpg" class="pic">
    </div>
    <!--上面图片 -->
    <div class="out_top">
    <img src="http://www.v3wall.com/wallpaper/medium/0912/medium_20091208010222520895.jpg" class="pic">
    </div>
    <!--下面图片 -->
    <div class="out_bottom">
    <img src="http://www.v3wall.com/wallpaper/medium/1410/medium_20141017074306778269.jpg" class="pic">
    </div>

    <!--小正方体 -->
    <span class="in_front">
    <img src="http://www.v3wall.com/wallpaper/medium/1604/medium_201604200318381019357.jpg" class="in_pic">
    </span>
    <span class="in_back">
    <img src="http://www.v3wall.com/wallpaper/medium/1405/medium_201405180328251508408.jpg" class="in_pic">
    </span>
    <span class="in_left">
    <img src="http://tu.kyhs.net/d/file/2015/03/9752f1b8ab3d3ffde4a8fa2d42d6d28b.jpg" class="in_pic">
    </span>
    <span class="in_right">
    <img src="http://img166.ph.126.net/Udkk1u_blTYk5Wo8q3DaJQ==/2185371719182849685.jpg" class="in_pic">
    </span>
    <span class="in_top">
    <img src="http://www.v3wall.com/wallpaper/medium/1412/medium_20141203081648370838.jpg" class="in_pic">
    </span>
    <span class="in_bottom">
    <img src="http://www.v3wall.com/wallpaper/medium/1003/medium_20100317123503744253.jpg" class="in_pic">
    </span>
    </div>

    </div>

    补充说明

    若要修改图片,更改图片来源即可

  • 相关阅读:
    Leetcode 50.Pow(x,n) By Python
    Leetcode 347.前K个高频元素 By Python
    Leetcode 414.Fizz Buzz By Python
    Leetcode 237.删除链表中的节点 By Python
    Leetcode 20.有效的括号 By Python
    Leetcode 70.爬楼梯 By Python
    Leetcode 190.颠倒二进制位 By Python
    团体程序设计天梯赛 L1-034. 点赞
    Wannafly挑战赛9 C-列一列
    TZOJ Start
  • 原文地址:https://www.cnblogs.com/oldwangcy/p/11371637.html
Copyright © 2011-2022 走看看