yuesezhenmei 发表于 2019-9-7 20:35:15

立方体 透视 滚动效果

需鼠标移动到上面<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title></title>
                <style type="text/css">
                        *{
                                margin: 0;
                                padding: 0;
                        }
                        #box{
                                width: 600px;
                                height: 600px;
                                background-color: darkgray;
                                margin: auto;
                                position: relative;
                                perspective: 800px;
                        }
                        #box ul{
                                width: 300px;
                                height: 300px;
                                position: absolute;
                                left: 0;
                                right: 0;
                                top: 0;
                                bottom: 0;
                                margin: auto;
                                transform-style: preserve-3d;
                                transition: all 8s;       
                        }
                        ul li{
                                list-style: none;
                                color: hotpink;
                        }
                        #box ul li{
                                width: 300px;
                                height: 300px;
                                line-height: 300px;
                                font-size: 48px;
                                text-align: center;
                                position: absolute;
                        }
                        li:nth-child(1)
                        {
                                background: rgba(255,0,0,.5);
                                transform: translateY(-150px) rotateX(90deg);
                        }
                        li:nth-child(2)
                        {
                                background: rgba(0,0,255,.5);
                                transform: translateY(150px) rotateX(90deg);
                        }
                        li:nth-child(3)
                        {
                                background: rgba(0,255,0,.5);
                                transform: translateX(-150px) rotateY(90deg);
                        }
                        li:nth-child(4)
                        {
                                background: rgba(255,0,255,.5);
                                transform: translateX(150px) rotateY(90deg);
                        }
                        li:nth-child(5)
                        {
                                background: rgba(255,255,0,.5);
                                transform: translateZ(150px);
                        }
                        li:nth-child(6)
                        {
                                background: rgba(0,255,255,.5);
                                transform: translateZ(-150px);
                        }
                        #box ul:hover{
                                transform: rotateX(360deg) rotateY(360deg) ;
                        }
                </style>
        </head>
        <body>
                <div id="box">
                        <ul>
                                <li>上</li>
                                <li>下</li>
                                <li>左</li>
                                <li>右</li>
                                <li>前</li>
                                <li>后</li>
                        </ul>
                </div>
        </body>
</html>

_2_ 发表于 2019-9-7 20:39:20

听起来很高能的样子

yuesezhenmei 发表于 2019-9-7 20:40:58

_2_ 发表于 2019-9-7 20:39
听起来很高能的样子

让你失望没有点简单 我也不会太多

_2_ 发表于 2019-9-7 20:41:21

66666666

阳顺 发表于 2019-9-7 21:38:13

透视吗{:5_109:}

110110a 发表于 2019-9-8 00:15:00

kanyixia

风筝误 发表于 2019-9-8 22:02:06

学习一下

284115671 发表于 2019-9-9 08:59:47

我来康康

wuqramy 发表于 2020-4-12 21:28:33

瞧瞧看

weiter 发表于 2020-4-12 22:03:45

wow，let我康康{:10_257:}

kavenluo 发表于 2020-4-12 22:17:36

前方高能

。haha 发表于 2020-4-12 22:50:52

学习

grtty0145 发表于 2020-4-23 00:13:01

學習學習

阳关雨飘 发表于 2020-6-9 15:53:41

很棒

KentH 发表于 2020-6-12 21:54:58

6666666666

寂寞涵少 发表于 2020-6-13 12:18:48

？？？

aaron.yang 发表于 2020-6-18 20:57:53

看起来很厉害

GolDream 发表于 2020-6-22 03:04:05

{:5_91:}

qq2695282583 发表于 2020-6-22 15:03:58

看看

447519854 发表于 2020-6-23 09:01:05

想问一下，perspective是设置的什么属性啊？
页: [1] 2 3 4 5
查看完整版本: 立方体 透视 滚动效果