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

左手的ㄟ右手 2022-12-27 08:41 222阅读 0赞

> 业精于勤 荒于嬉

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

今天来写一个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">
        
        <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>  <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>

> 积跬步 至千里

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70]: /images/20221120/cf9e9baa5e504784a7c45770f66e2e54.png