zoukankan html css js c++ java

3D立体效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>基于CSS3的3D立方体旋转动画</title>
        <style>
            /* 3d旋转样式 */
            .cub {
                 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;
                 100%;
            }

            #cube * {
                display: block;
                height: 2.5rem;
                position: absolute;
                 2.5rem;
                cursor: pointer;
            }

            .cub:hover {
                 6.25rem;
                height: 6.25rem;
            }

            .cub:hover #cube * {
                 6.25rem;
                height: 6.25rem;
            }

            #cube *:before {
                content: '';
                height: 100%;
                position: absolute;
                 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>

https://www.cnblogs.com/2979100039-qq-con/p/13367091.html

查看全文

相关阅读:
@ModelAttribute注解详细使用
 Spring MVC使用注解实现账户注册与登陆
 @PathVariable、@RequestHeader与@CookieValue注解的使用案例
 IDEA搭建我的第一个Spring MVC应用（附使用注解实现）
JDBC自定义工具类
 JDBC与MySQL实现分页查询技术
 JavaWeb实战——记录网站上一次访问时间
 微信小程序使用setData修改数组中的指定下标的属性值
 Centos6.x 无法 ping 外网 --- 已解决
 Ckeditor失去焦点前保留光标位置

原文地址：https://www.cnblogs.com/brady-wang/p/14252097.html