zoukankan      html  css  js  c++  java
  • html 旋转

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            ul{
                position: relative;/*相对定位*/
                width: 200px;
                height: 200px;
                transform-style: preserve-3d;/*将所有子元素呈现在3d空间中*/
                margin: 250px auto;
                animation: run 5s infinite linear;
            }
            li{
                list-style: none;
                width:200px;
                height: 200px;
                position: absolute;
                left: 0;
                top: 0;
                opacity: 0.4;
            }
            li:first-child{
                background: red;
                transform: translateZ(100px)/*用translateZ将面都沿着Z轴平移了100像素*/
            }
            li:nth-child(2){
                background: green;
                transform: translateY(-100px) rotateX(90deg);
            }
            li:nth-child(3){
                background: pink;
                transform: translateY(100px) rotateX(90deg);
            }
            li:nth-child(4){
                background: orange;
                transform: translateX(-100px) rotateY(90deg);
            }
            li:nth-child(5){
                background: blue;
                transform: translateX(100px) rotateY(90deg);
            }
            li:nth-child(6){
                background: blue;
                transform: translateZ(-100px);
            }
           
        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    
    </body>
    </html>
  • 相关阅读:
    shell脚本100例、练习使用
    shell基础编程
    mysql基础理论知识
    Docker 基础
    python基础之类(面向对象编程)
    python基础之函数
    python基础之认知及编码
    python基础之数据类型
    python基础之注意事项
    1.linux使用基础
  • 原文地址:https://www.cnblogs.com/hellowzd/p/9704813.html
Copyright © 2011-2022 走看看