13-CSS3-3D转换模块

作者: xiaohan_zhang | 来源:发表于2019-08-17 16:37 被阅读0次

13-CSS3-3D转换模块
章节 (20) 2D转换模块
11 标准模块与第三方模块[python基础]
python模块介绍- time 时间访问和转换
python工具模块介绍-time 时间访问和转换
40GE、100GE模块 10g dwdm cwdm 25g
head first python（第二章）–学习笔记
一键HTML 转 Bean -- Ajsoup
py3笔记8：json结构的校验
10GBASE-T SFP+电口模块知识百科

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .father{
        width: 200px;
        height: 200px;
        background-color: red;
        border: 1px solid #000;
        margin: 100px auto;
        perspective: 500px;
        transform-style: preserve-3d;
        transform: rotateY(100deg);
    }
    .son{
        width: 100px;
        height: 100px;
        background-color: blue;
        border: 1px solid #000;
        margin: 50px auto;
        transform: rotateY(45deg);
    }
</style>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

长方体

<style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            perspective: 500px;
        }
        ul{
            width: 200px;
            height: 200px;
            box-sizing: border-box;
            margin: 100px auto;
            position: relative;
            transform: rotateX(0deg) rotateY(0deg);
            transform-style: preserve-3d;
            animation: sport 8s linear 0s infinite;
        }
        li{
            list-style: none;
            width: 200px;
            height: 200px;
            /*line-height: 200px;*/
            /*text-align: center;*/
            /*font-size: 60px;*/
            position: absolute;
            left: 0;
            top: 0;
        }

        ul li:nth-child(1){
            background-color: red;
            transform: rotateX(90deg) translateZ(100px) scale(2, 1);
        }
        ul li:nth-child(2){
            background-color: blue;
            transform: rotateX(180deg) translateZ(100px)  scale(2, 1);
        }
        ul li:nth-child(3){
            background-color: deepskyblue;
            transform: rotateX(270deg) translateZ(100px)  scale(2, 1);
        }
        ul li:nth-child(4){
            background-color: fuchsia;
            transform: rotateX(360deg) translateZ(100px) scale(2, 1);
        }
        ul li:nth-child(5){
            background-color: green;
            /*正方体*/
            /*transform: rotateY(90deg) translateX(-100px);*/
            /*长方体*/
            transform: translateX(-200px) rotateY(90deg);
        }
        ul li:nth-child(6){
            background-color: sandybrown;
            /*正方体*/
            /*transform: rotateY(90deg) translateX(100px);*/
            /*长方体*/
            transform: translateX(200px) rotateY(90deg);
        }
        ul li img{
            /*只要父元素被拉伸了，子元素也会被拉伸*/
            width: 200px;
            height: 200px;
        }
        @keyframes sport {
            from{
                transform: rotateX(0deg);
            }
            to{
                transform: rotateX(360deg);
            }
        }
    </style>
<body>
    <ul>
        <li><img src="images/1.jpg" alt=""></li>
        <li><img src="images/2.jpg" alt=""></li>
        <li><img src="images/3.jpg" alt=""></li>
        <li><img src="images/4.jpg" alt=""></li>
        <li><img src="images/5.jpg" alt=""></li>
        <li><img src="images/6.jpg" alt=""></li>
    </ul>
</body>

注意点：

动画中如果有和默认样式中同名的属性，会覆盖默认样式中同名的属性；
在编写动画的时候，固定不变的值写在前面，需要变化的值写在后面；

图片展示demo

<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        background: url("images/bg.jpg") no-repeat;
        /*背景图片填满网页*/
        background-size: cover;
        overflow: hidden;
    }
    ul{
        width: 200px;
        height: 200px;
        position: absolute;
        bottom: 150px;
        /*水平居中*/
        left: 50%;
        margin-left: -100px;
        transform-style: preserve-3d;
        /*transform: rotateX(-10deg);*/
        animation: sport 8s linear 0s infinite;
    }
    ul:hover{
        animation-play-state: paused;
    }
    ul:hover img{
        opacity: 0.5;
    }
    ul li:hover img{
        opacity: 1;
    }
    ul li{
        list-style: none;
        width: 200px;
        height: 200px;
        background-color: black;
        position: absolute;
        left: 0;
        top: 0;
        box-sizing: border-box;
    }
    ul li:nth-child(1){
        transform: rotateY(60deg) translateZ(200px);
    }
    ul li:nth-child(2){
        transform: rotateY(120deg) translateZ(200px);
    }
    ul li:nth-child(3){
        transform: rotateY(180deg) translateZ(200px);
    }
    ul li:nth-child(4){
        transform: rotateY(240deg) translateZ(200px);
    }
    ul li:nth-child(5){
        transform: rotateY(300deg) translateZ(200px);
    }
    ul li:nth-child(6){
        transform: rotateY(360deg) translateZ(200px);
    }
    ul li img{
        width: 200px;
        height: 200px;
        border: 5px solid deepskyblue;
    }
    .emoji{
        width: 80px;
        height: 80px;
        position: absolute;
        left: 100px;
        bottom: 100px;
        animation: move 10s linear 0s infinite normal;
    }
    @keyframes sport {
        from{
            transform: rotateX(-10deg) rotateY(0deg);
        }
        to{
            transform: rotateX(-10deg) rotateY(360deg);
        }
    }
    @keyframes move {
        0%{
            left: 100px;
            bottom: 100px;
            opacity: 1;
        }
        20%{
            left: 300px;
            bottom: 300px;
            opacity: 0;
        }
        40%{
            left: 500px;
            bottom: 500px;
            opacity: 1;
        }
        60%{
            left: 800px;
            bottom: 300px;
            opacity: 0;
        }
        80%{
            left: 1200px;
            bottom: 100px;
            opacity: 1;
        }
        100%{
            left: 800px;
            bottom: -200px;
        }
    }
</style>
<body>
<ul>
    <li><img src="images/11.jpg" alt=""></li>
    <li><img src="images/22.jpeg" alt=""></li>
    <li><img src="images/33.jpg" alt=""></li>
    <li><img src="images/44.jpeg" alt=""></li>
    <li><img src="images/55.jpeg" alt=""></li>
    <li><img src="images/66.jpeg" alt=""></li>
</ul>
<img src="images/qq.jpeg" alt="" class="emoji">
</body>