web实训第二天

最新推荐文章于 2024-09-13 16:26:56 发布

隔壁小孩馋不哭

最新推荐文章于 2024-09-13 16:26:56 发布

阅读量378

点赞数 1

文章标签：前端前端 css3

本文链接：https://blog.csdn.net/GZY13/article/details/121364338

版权

1、第二天实训内容（1）学习清楚float浮动，以及清除浮动的原因（2）记住一个经典的面试题overflow:hidden的作用（3）图形定位时不同的属性（4）小实例：旋转的方块。

（1）清除float浮动及其原因，overflow:hidden的作用

（2）图形定位可以设定的属性

2、今日作业：会旋转的方块并附上图片

<head>标签

<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>
        .rect-wrap {
            position: relative;
            perspective: 2000px;
        }
        .container {
            width: 400px;
            height: 400px;
            transform-style: preserve-3d;
            transform-origin: 50% 50% 100px;
            top: 100px;

        }
        .slide {
            width: 200px;
            height: 200px;
            position: absolute;
            background: #000;
            line-height: 200px;
            text-align: center;
            color: #fff;
            font-size: 30px;
            font-weight: bold;
        }
        .top {
            left: 100px;
            top: -100px;
            transform: rotateX(-90deg);
            transform-origin: bottom;
            background: red;
        }
        .bottom {
            left: 100px;
            bottom: -100px;
            transform: rotateX(90deg);
            transform-origin: top;
            background: grey;
        }
        .left {
            left: -100px;
            bottom: 100px;
            transform: rotateY(90deg);
            transform-origin: right;
            background: green;
        }
        .right {
            left: 300px;
            bottom: 100px;
            transform: rotateY(-90deg);
            transform-origin: left;
            background: yellow;
        }
        .front {
            left: 100px;
            top: 100px;
            transform: translateZ(200px);
            background: black;
        }
        .back {
            left: 100px;
            top: 100px;
            transform: translateZ(0);;
            background: blue;
        }
        @keyframes rotate-frame {
            40% {
                transform: rotateX(-360deg) rotateY(360deg);
            }
            50% {
                transform: rotateX(-180deg) rotateY(360deg);
            }
        }

        .container{
            animation: rotate-frame 30s linear infinite;

        }
    </style>
    </head>

<body>标签

<body class="body">
    <div class="rect-wrap">
        <div class="container">
            <div class="top slide"> <img src="https://img1.baidu.com/it/u=2280846866,3983177513&fm=26&fmt=auto" alt=""></div>   <!-- //立方体的六个面 -->
            <div class="bottom slide"><img src="https://img0.baidu.com/it/u=116472069,1736329017&fm=26&fmt=auto" alt=""></div>
            <div class="left slide"><img src="https://img2.baidu.com/it/u=3356828873,1566042336&fm=26&fmt=auto" alt=""></div>
            <div class="right slide"><img src="https://img1.baidu.com/it/u=1477670408,2951512239&fm=26&fmt=auto" alt=""></div>
            <div class="front slide"><img src="https://img0.baidu.com/it/u=2959350031,2871456193&fm=26&fmt=auto" alt=""></div>
            <div class="back slide"><img src="https://img0.baidu.com/it/u=3694538584,1562780667&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200" alt=""></div>
        </div>
    </div>
    </body>

运行效果