CSS变形实例—奥运五环

Zhu_S W

于 2024-05-18 20:26:09 发布

阅读量203

点赞数 2

分类专栏：前端学习文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_73735141/article/details/139030880

版权

前端学习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

相关知识点见：CSS变形（2）

HTML部分：

    <div>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
    </div>

CSS部分：

        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        div {
            width: 700px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            transform-style: preserve-3d;
        }

        .item {
            display: block;
            margin: 10px;
            width: 200px;
            height: 200px;
            box-sizing: border-box;
            border: 20px solid rgb(39, 100, 145);
            border-radius: 50%;
        }

        .item:nth-child(2) {
            border-color: rgb(1, 1, 1);
            transform: rotateY(-2deg);
        }

        .item:nth-child(3) {
            border-color: red;
            transform: rotateY(-2deg);
        }

        .item:nth-child(4) {
            border-color: rgb(239, 216, 42);
            transform: translateY(-130px) rotateX(1deg) rotateY(1deg);
        }

        .item:nth-child(5) {
            border-color: green;
            transform: translateY(-130px) rotateX(1deg) rotateY(1deg);
        }

实际效果图：