前端之奥运五环和立体滚动窗

最新推荐文章于 2024-10-13 09:06:22 发布

岳轩子

最新推荐文章于 2024-10-13 09:06:22 发布

阅读量310

点赞数 4

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

本文链接：https://blog.csdn.net/weixin_51395608/article/details/138010691

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用HTML和CSS创建一个带有3D效果的页面，通过CSS的transform属性和Radio按钮控制内容在三个选项卡之间的切换，同时展示了3D变换中心点设置和3D透视效果的运用。

摘要由CSDN通过智能技术生成

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            height: 1000px;
        }
        .container {
            margin: auto;
            margin-top: 10px;
            width: 800px;
            height: 400px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            transform-style: preserve-3d;
        }

        .item {
            width: 200px;
            height: 200px;
            border: 20px solid;
            border-radius: 50%;
        }

        .item:nth-child(1) {
            color: rgb(38, 128, 192);
        }

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

        .item:nth-child(3) {
            color: rgb(219, 35, 35);
            transform: rotateY(-5deg);
        }

        .item:nth-child(4) {
            color: rgb(226, 204, 36);
            transform: translateY(-122px) rotateX(2deg) rotateY(2deg);
        }

        .item:nth-child(5) {
            color: rgb(23, 216, 32);
            transform: translateY(-122px) rotateX(2deg) rotateY(2deg);
        }
        #main{
            margin: auto;
            /* background-color: #d13d3d; */
            width: 650px;
            height: 334px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            /* 设置视距 */
            perspective: 1500px;
        }
        .labels{
            display: flex;
            flex-direction: column;
            background-color: aquamarine;
            justify-content: space-between;
        }
        #main .tab_body{
            width: 500px;
            height: 300px;
            background-color: #3d1fc6;
            position: relative;
            transform-style: preserve-3d;
            transform: rotateX(0px);
            /* transform: rotateY(48deg); */
            transition: transform 2s ease;
        }
        #main .tab_body .tab_content{
            width: 520px;
            height: 300px;
            /* background-color: #3d1fc6; */
            position: absolute;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .labels {
            height: 334px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            
        }
        .labels label{
            width: 100px;
            height: 100px;
            display: block;
            text-align: center;
            line-height: 100px;
            background-color: rgba(94, 40, 212, 0.175);
            cursor: pointer;
        }
        .labels label:hover{
            opacity: 0.8;
        }
        .labels label:nth-child(1){
            background-color: #e84629;
        }
        .labels label:nth-child(2){
            background-color: rgb(92, 228, 28);
        }
        .labels label:nth-child(3){
            background-color: #2760db;
        }
        input {
            display: none;
        }
        .tab_body .tab_content:nth-child(1){
            transform: translateY(-150px) rotateX(90deg);
            background-color: #e84629;
        }
        .tab_body .tab_content:nth-child(2){
            transform: translateZ(150px);
            background-color: rgb(92, 228, 28);
        }
        .tab_body .tab_content:nth-child(3){
            transform: translateY(150px) rotateX(-90deg);
            background-color: #2760db;
        }
        #btn1:checked~.tab_body {
            transform: rotateX(-90deg);
        }

        #btn2:checked~.tab_body {
            transform: rotateX(0deg);
        }

        #btn3:checked~.tab_body {
            transform: rotateX(90deg);
        }
    </style>
</head>

<body>
    <div class="container">
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
    </div>
    <div id="main">
        <input type="radio" name="tabs" id="btn1">
        <input type="radio" name="tabs" id="btn2">
        <input type="radio" name="tabs" id="btn3">
        <div class="tab_body">
            <div class="tab_content">
                <h1>top</h1>
                <p>this top</p>
            </div>
            <div class="tab_content">
                <h1>middle</h1>
                <p>this middle</p>
            </div>
            <div class="tab_content">
                <h1>bottom</h1>
                <p>this bottom</p>
            </div>
        </div>
        <div class="labels">
            <label for="btn1">top</label>
            <label for="btn2">middle</label>
            <label for="btn3">bottom</label>
        </div>
    </div>
</body>

</html>

效果

笔记

/* 
                transform用于设置变形,有以下参数
                1、translate(x,y)  2D的设置移动距离，x表示沿x轴的距离，y表示沿y轴的距离（y轴是向下为正）不写代表0
                    translateX(x)  translateY(y)    translateZ(z)
                2、translate3d(x,y,z)  3D的， 
                3、scale(x,y)   元素缩放，是比例，省略y时，会默认y跟x相同
                    scale3d(x,y,z)  3d效果上的缩放
                    也可以单独设置，跟translate相同
                4、rotate(angle)  2d旋转，沿中心点顺时针旋转
                    rotate3d(x,y,z,angle)   3d旋转
                    rotateX(angle)    rotateY(angle)  rotateZ(angle)
                5、skew(x-angle,y-angle)    定义沿着 X 和 Y 轴的 2D 倾斜转换。
                    skewX(angle)   skewY(angle)
             */

            /* 
                变形相关
                1、设置变形中心点
                    transform-origin:right bottom;   表示绕着右下旋转，第一个代表水平方向，第二个代表垂直方向，也可以是具体的数字（50px，50px）
                2、3D效果
                    perspective 3D透视效果  作用于父级元素
                    transfrom-style:preserve-3d 3D嵌套效果
                    backface-visibility:    设置背面是否可见,为hidden时不可见，visible表示可见（默认值）

             */