CSS 知识碎片[二] CSS3 3d 特效翻页 & 立方体效果

最新推荐文章于 2024-02-14 10:50:20 发布

小智大愚

最新推荐文章于 2024-02-14 10:50:20 发布

阅读量385

点赞数

分类专栏： web 前端文章标签： css3 css html 3d

本文链接：https://blog.csdn.net/Sandy_zhi/article/details/110929706

版权

web 前端专栏收录该内容

90 篇文章 1 订阅

订阅专栏

业精于勤荒于嬉

今天今天今天，读完了本月的第三本书，书中自有黄金屋一点都没错了。开始一件事情最好的时机是十年前，其次是现在。

今天来写一个css3 的3d 特效。

关键API

动画实现：选择 transition

transform: transform-style: preserve-3d; (转换风格3d) transform-origin: bottom;(转换中心点)

透视效果：perspective (物体距离视口的距离) persperctive-origin（人眼观察时的视点）

3d 上下翻页效果

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

<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title>3d 翻页效果</title>
    <style>
        #my3dspace {
            perspective: 800px;
            perspective-origin: 50% 50%;
            overflow: hidden;
        }

        #pagegroup {
            width: 400px;
            height: 400px;
            margin: 0 auto;
            transform-style: preserve-3d;
            position: relative;
        }

        .page {
            width: 360px;
            height: 360px;
            padding: 20px;
            background-color: black;

            color: white;

            font-weight: bold;
            font-size: 360px;
            line-height: 360px;
            text-align: center;

            position: absolute;
        }

        #page1 {
            transform-origin: bottom;
            transition: transform 1s linear;
        }

        #page2,
        #page3,
        #page4,
        #page5,
        #page6 {
            transform-origin: bottom;
            transition: transform 1s linear;
            transform: rotateX(90deg);
            /* display: none; */
        }

        #op {
            text-align: center;
            margin: 40px auto;
        }
    </style>
    <script>
        let curIndex = 1

        function next() {
            //边界判定
            if (curIndex == 6) return
            // 取到当前显示的元素，然后翻转90度 到屏幕以外
            let curPage = document.getElementById('page' + curIndex);
            curPage.style.transform = 'rotateX(-90deg)'

            // 下一个页面
            curIndex++
            let nextPage = document.getElementById('page' + curIndex)
            nextPage.style.transform = 'rotateX(0)'
        }

        function prev() {
            if (curIndex == 1) return
            let curPage = document.getElementById('page' + curIndex);
            curPage.style.transform = 'rotateX(90deg)'

            curIndex--
            let prevPage = document.getElementById('page' + curIndex)
            prevPage.style.transform = 'rotateX(0)'




        }
    </script>
</head>

<body>
    <div id="my3dspace">
        <div id="pagegroup">
            <div class="page" id="page1">1</div>
            <div class="page" id="page2">2</div>
            <div class="page" id="page3">3</div>
            <div class="page" id="page4">4</div>
            <div class="page" id="page5">5</div>
            <div class="page" id="page6">6</div>
        </div>
    </div>
    <div id="op">
        <a href="javascript:next()">next</a>&nbsp; <a href="javascript:prev()">previous</a>
    </div>
</body>

</html>

3d 正方体转动效果

<!DOCTYPE html>
<html>

<head>
    <title>3D 正方体</title>

    <style>
        html,
        body,
        div,
        span,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p a,
        img,
        ol,
        ul,
        li {
            margin: 0;
            padding: 0;
            border: 0;
            outline: 0;
        }

        #experiment {
            perspective: 800px;
            perspective-origin: 50% 50%;
            padding-top: 50px;
        }

        #cube {
            position: relative;
            margin: 100px auto;
            height: 200px;
            width: 200px;
            transform-style: preserve-3d;
        }

        .face {
            position: absolute;
            height: 160px;
            width: 160px;
            padding: 20px;
            background-color: black;

            color: white;
            font-weight: bold;
            font-size: 160px;
            line-height: 160px;
            text-align: center;


            transition: transform 1s linear;
        }

        #face1 {}

        #face2 {

            transform-origin: right;

            transform: rotateY(-90deg);
        }

        #face3 {
            transform-origin: left;
            transform: rotateY(90deg);
        }

        #face4 {
            transform-origin: top;
            transform: rotateX(-90deg);
        }

        #face5 {
            transform-origin: bottom;
            transform: rotateX(90deg);
        }

        #face6 {
            transform: translateZ(-200px);
        }

        #op {
            margin: 0 auto;
            font-size: 16px;
            font-weight: bold;
            width: 800px;
        }

        #op .range-control {
            width: 721px;
        }
    </style>

    <script type="text/javascript">
        function rotate() {
            var x = document.getElementById("rotatex").value;
            var y = document.getElementById("rotatey").value;
            var z = document.getElementById("rotatez").value;
            document.getElementById('cube').style.transform = "rotateX(" + x + "deg) rotateY(" + y +
                "deg) rotateZ(" + z + "deg)";

            document.getElementById('degx-span').innerText = x;
            document.getElementById('degy-span').innerText = y;
            document.getElementById('degz-span').innerText = z;
        }
    </script>
</head>

<body>
    <div id="experiment">
        <div id="cube">
            <div class="face" id="face1">1</div>
            <div class="face" id="face2">2</div>
            <div class="face" id="face3">3</div>
            <div class="face" id="face4">4</div>
            <div class="face" id="face5">5</div>
            <div class="face" id="face6">6</div>
        </div>
    </div>
    <div id="op">
        <p>rotate x: <span id="degx-span">0</span> deg</p>
        <input type="range" min="-360" max="360" id="rotatex" value="0" class="range-control"
            onchange="rotate()" /><br />
        <p>rotate y: <span id="degy-span">0</span> deg</p>
        <input type="range" min="-360" max="360" id="rotatey" value="0" class="range-control"
            onchange="rotate()" /><br />
        <p>rotate z: <span id="degz-span">0</span> deg</p>
        <input type="range" min="-360" max="360" id="rotatez" value="0" class="range-control"
            onchange="rotate()" /><br />
    </div>
</body>

</html>