zoukankan      html  css  js  c++  java
  • 3D立体效果

    效果图看左上角

    代码如下:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>基于CSS3的3D立方体旋转动画</title>
            <style>
                /* 3d旋转样式 */
                .cub {
                    width: 2.5rem;
                    height: 2.5rem;
                    position: fixed;
                    left: 3%;
                    top: 3.75rem;
                }
    
                #cube {
                    animation: 6s spin linear infinite;
                    height: 100%;
                    position: absolute;
                    transform-style: preserve-3d;
                    width: 100%;
                }
    
                #cube * {
                    display: block;
                    height: 2.5rem;
                    position: absolute;
                    width: 2.5rem;
                    cursor: pointer;
                }
    
                .cub:hover {
                    width: 6.25rem;
                    height: 6.25rem;
                }
    
                .cub:hover #cube * {
                    width: 6.25rem;
                    height: 6.25rem;
                }
    
                #cube *:before {
                    content: '';
                    height: 100%;
                    position: absolute;
                    width: 100%;
                }
    
                .cub:hover #back {
                    transform: rotateX(180deg) translateZ(5rem);
                }
    
                .cub:hover #front {
                    transform: rotateY(0deg) translateZ(5rem);
                }
    
                .cub:hover #bottom {
                    transform: rotateX(-90deg) translateZ(5rem);
                }
    
                .cub:hover #left {
                    transform: rotateY(-90deg) translateZ(5rem);
                }
    
                .cub:hover #right {
                    transform: rotateY(90deg) translateZ(5rem);
                }
    
                .cub:hover #top {
                    transform: rotateX(90deg) translateZ(5rem);
                }
    
                /*  */
    
                #back {
                    transform: rotateX(180deg) translateZ(1.875rem);
                }
    
                #front {
                    transform: rotateY(0deg) translateZ(1.875rem);
                }
    
                #bottom {
                    transform: rotateX(-90deg) translateZ(1.875rem);
                }
    
                #left {
                    transform: rotateY(-90deg) translateZ(1.875rem);
                }
    
                #right {
                    transform: rotateY(90deg) translateZ(1.875rem);
                }
    
                #top {
                    transform: rotateX(90deg) translateZ(1.875rem);
                }
    
                @keyframes spin {
                    0% {
                        transform: translateZ(6.25rem) rotateX(0) rotateY(0deg);
                    }
    
                    100% {
                        transform: translateZ(6.25rem) rotateX(360deg) rotateY(360deg);
                    }
                }
            </style>
        </head>
    
        <body>
            <!-- 3d旋转图片div -->
            <div class="cub">
                <ul id="cube">
                    <li id="back">
                        <img src=" ">
                    </li>
                    <li id="bottom">
                        <img src=" ">
                    </li>
                    <li id="front">
                        <img src=" ">
                    </li>
                    <li id="left">
                        <img src=" ">
                    </li>
                    <li id="right">
                        <img src=" ">
                    </li>
                    <li id="top">
                        <img src=" ">
                    </li>
                </ul>
            </div>
    
        </body>
    </html>

    个人学习,内容简略。

  • 相关阅读:
    融云会话界面导航上移-使用IQKeyboardManager
    App调用safar
    info.plist 安全登录
    could not find developer disk image
    easyExcel使用以及踩过的坑
    springBoot配置文件详解
    jvm面试题(纯手撸)
    面试题
    设计模式之观察者模式(Observer)
    设计模式之模板方法(TemplateMethod)
  • 原文地址:https://www.cnblogs.com/2979100039-qq-con/p/13367091.html
Copyright © 2011-2022 走看看