六面体魔方转动

最新推荐文章于 2021-03-13 11:57:40 发布

cm_xuan77

最新推荐文章于 2021-03-13 11:57:40 发布

阅读量1k

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/cmchenmei/article/details/78365915

版权

JS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html,body{
            height:100%;
        }
       *{
            margin:0;
            padding:0;
        }
        body{
            background:black;
        }
       ul{
            list-style-type:none;
        }
        .box{
            width:450px;
            height:450px;
            margin:20px auto;
            position:relative;
            perspective:1000px;
            animation:sf 1s ease-in-out 1;
        }
        @keyframes sf{
            0%{
                transform:scale(0.2);
            }
            100%{
                transform:scale(1);
            }
        }
        ul{
            width:300px;
            height:300px;
            position:absolute;
            left:50%;
            top:50%;
            margin-left:-150px;
            margin-top:-150px;
            transform-style:preserve-3d;
            animation:sq 2s linear infinite;
            transform-origin:150px 150px -150px;
        }
        @keyframes sq{
            0%{
                transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            }
            100%{
                transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);
            }
        }
        ul li{
            width:300px;
            height:300px;
            font-size:100px;
            position:absolute;
            left:0;
            top:0;
            text-align:center;
            line-height:300px;
            color:white;
        }
        li:nth-child(1){
            transform-origin:left;
            transform:rotateY(90deg);
            background:url(img/11.jpg);
        }
        li:nth-child(2){
            transform-origin:top;
            transform:rotateX(-90deg);
            background:url(img/22.jpg);
        }
        li:nth-child(3){
            transform-origin:right;
            transform:rotateY(-90deg);
            background:url(img/33.jpg);
        }
        li:nth-child(4){
            transform-origin:bottom;
            transform:rotateX(90deg);
            background:url(img/44.jpg);
        }
        li:nth-child(5){
            transform:scaleZ(-300px);
            background:url(img/55.jpg);
        }
        li:nth-child(6){
            background:url(img/66.jpg);
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div>
</body>
</html>

1.图片需要自己改动；
2.主要涉及到transform：
transform：translate（移动）；scale（放大缩小） skew（倾斜）rotate（旋转） origin（基准线）
3.animation(动画)

cm_xuan77

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
六面体魔方转动

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> html,body{ height:100%; } *{ margin:0;
复制链接

扫一扫

专栏目录