CSS3实现移动的正方体

最新推荐文章于 2020-05-08 17:17:35 发布

Mr.王征

最新推荐文章于 2020-05-08 17:17:35 发布

阅读量1.1k

点赞数 4

分类专栏： CSS 文章标签： css3 html web前端 html5

本文链接：https://blog.csdn.net/wangzhneg123/article/details/87282622

版权

CSS 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

效果展示：

源码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            perspective: 600px;;
        }
        .box{
            width: 400px;
            height: 400px;

            margin:100px auto;
            position:relative;

        }
        .box:hover ul{
            transform: rotateX(360deg) rotateY(360deg);
        }
        ul{
            width: 400px;
            height: 400px;

            transform: rotateX(-30deg) rotateY(0deg) ;
            transform-style: preserve-3d;
            transition: all 10s linear;
        }
        li{
            list-style: none;
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            background:rgba(255,56,49,0.5);
            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            bottom:0;
            top: 0;;

        }
        ul :nth-child(1){
            transform:rotateY(0deg) translateZ(100px);
        }
        ul :nth-child(2){
            transform: rotateY(-90deg) translateZ(100px);
        }
        ul :nth-child(3) {
            transform: rotateY(-180deg) translateZ(100px);
        }
        ul :nth-child(4){
            transform: rotateY(-270deg) translateZ(100px);
        }
        ul :nth-child(5){
            transform: rotatex(90deg) translateZ(100px);
        }
        ul :nth-child(6){
            transform: rotatex(90deg) translateZ(-100px);
        }

    </style>
</head>
<body>
<div class="box">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<hr>
<pre style="color:red">
 感：  最近贡献一下我在教学中的小案例  希望能给你一些帮助 ,希望大家继续关注我的博客

                                                                               --王
</pre>
</body>
</html>