前端初体验——css3D变形练习1：奥运五环-CSDN博客

本文链接：https://blog.csdn.net/2301_78566776/article/details/141676995

最终效果

HTML文件内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="奥运五环.css">
</head>
<body>
    <div class="huan1"></div>
    <div class="huan2"></div>
    <div class="huan3"></div>
    <div class="huan4"></div>
    <div class="huan5"></div>

</body>
</html>

CSS文件内容

通过调整每个环在3D层面的旋转度来实现嵌套效果

body{
    display:flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    perspective: 500px;
    transform-style:preserve-3d ;
}

.huan1{
    width: 500px;
    height: 500px;
    margin-left: 25px;
    border: solid blue 55px;
    border-radius:1000px;
}
.huan2{
    width: 500px;
    height: 500px;
    margin-left:25px ;
    border: solid rgb(0, 0, 0) 55px;
    border-radius:1000px;
    transform: rotateX(0.3deg) rotateY(-1.5deg)
}
.huan3{
    width: 500px;
    height: 500px;
    margin-left: 25px;
    border: solid rgb(255, 0, 0) 55px;
    border-radius:1000px;

}

.huan4{
    width: 500px;
    height: 500px;
    margin-left: 25px;
    border: solid #e1ea34 55px;
    border-radius:1000px;
    transform: translate(-1580px,300px) rotateX(1deg) rotateY(1deg);

}

.huan5{
    width: 500px;
    height: 500px;
    margin-left: 25px;
    border: solid #109600 55px;
    border-radius:1000px;
    transform: translate(-1560px,300px) rotateX(-0.7deg) rotateY(0.9deg);

}