前端的一些3D旋转效果和实例——table切换

最新推荐文章于 2024-05-12 17:24:39 发布

张某布响丸辣

最新推荐文章于 2024-05-12 17:24:39 发布

阅读量372

点赞数 3

文章标签： 3d

本文链接：https://blog.csdn.net/qq_51321722/article/details/138010402

版权

首先，讲一下有关3D旋转的属性：

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表示可见（默认值）

实例——table切换

<!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>
        /* input {
            width: 100px;
            height: 100px;
        } */
        /* label{
            width: 100px;
            height: 100px;
        } */
        * {
            padding: 0;
            margin: 0;
        }

        body {
            height: 100vh;
            background: gray;
        }

        .container {
            width: 650px;
            height: 334px;
            margin: 150px auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            /* 设置视距 */
            perspective: 1500px;
        }

        .container .tab_body {
            width: 500px;
            height: 300px;
            background: olive;
            position: relative;
            /* 开启3D效果 */
            transform-style: preserve-3d;

            transform: rotateY(48deg);
            transform: rotateX(0px);
            /* 设置过度效果 */
            transition: transform 2s ease;
        }

        input {
            display: none;
        }

        .labels {
            height: 334px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .labels label {
            width: 100px;
            height: 100px;
            display: block;
            cursor: pointer;
            text-align: center;
            line-height: 100px;
        }

        .labels label:hover {
            opacity: 0.8;
        }

        .labels label:nth-child(1) {
            background: khaki;
        }

        .labels label:nth-child(2) {
            background: peru;
        }

        .labels label:nth-child(3) {
            background: aliceblue;
        }

        .container .tab_body .tab_content {
            width: 520px;
            height: 300px;
            background: lawngreen;
            position: absolute;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .container .tab_body .tab_content:nth-child(2) {
            transform: translateZ(150px);
            background: peru;
        }

        .container .tab_body .tab_content:nth-child(1) {
            transform: translateY(-150px) rotateX(90deg);
            background: khaki;
        }

        .container .tab_body .tab_content:nth-child(3) {
            transform: translateY(150px) rotateX(-90deg);
            background: aliceblue;
        }

        #btn1:checked~.tab_body {
            transform: rotateX(-90deg);
        }

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

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

<body>
    <!-- 
        label可以关联其他按钮，for中填的是想关联的id
        所以，想要改变选项框的样式，可以通过label的style来达到
     -->
    <div class="container">
        <input type="radio" name="tabs" id="btn1">
        <input type="radio" name="tabs" id="btn2" checked>
        <input type="radio" name="tabs" id="btn3">

        <div class="tab_body">
            <div class="tab_content">
                <h1>top</h1>
                <p>APEX真的是框是神作</p>
            </div>
            <div class="tab_content">
                <h1>middle</h1>
                <p>APEX真的是框是神作</p>
            </div>
            <div class="tab_content">
                <h1>bottom</h1>
                <p>APEX真的是框是神作</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>

张某布响丸辣

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
前端的一些3D旋转效果和实例——table切换

1、translate(x,y) 2D的设置移动距离，x表示沿x轴的距离，y表示沿y轴的距离（y轴是向下为正）不写代表0。5、skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。3、scale(x,y) 元素缩放，是比例，省略y时，会默认y跟x相同。rotate3d(x,y,z,angle) 3d旋转。scale3d(x,y,z) 3d效果上的缩放。2、translate3d(x,y,z) 3D的，实例——table切换。
复制链接

扫一扫