业精于勤 荒于嬉

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

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

积跬步  至千里

 

# css3 # css # html # 3d
Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

嵌入式作业（七）：基于Ardunio的STM32串口通信

嵌入式作业（七）0作业要求1Ardunio 完成STM32的串口通信（1）安装Ardunio IDE（2）stm32串口通信2关于 stduino IDE0作业要求安装 Ardunio IDE 和相关软件支持库，在Ardunio 完成STM32板子的串口通信程序：（1）持续向串口输出“Hello world！”；（2）当接收到“stop!”时，停止输出。网上有一个国人版的MCU集成开发平台， st

avatar CSDN学习社区

JDBC详解

JDBC文章目录JDBC什么是JDBC?JDBC驱动程序:Java使用JDBC访问数据库的步骤:设置classpath:Oracle连接字符串的书写格式:简单的例子:常用数据库的驱动程序及JDBC URL:Oracle数据库:SQL Server数据库MySQL数据库Access数据库PreparedStatement接口:JNDI-数据源（Data Source）与连接池（Connection

avatar CSDN学习社区

“模式识别与机器学习”学习笔记no2.再谈感知机

接**上篇：上篇主要进行了PLA，Pocket算法的理论过程分析和在给定数据集上利用pocket算法对数据集进行分类学习，得到错分数量最少的分类面。上篇中pocket算法的过程已经进行了编程和测试，框架已经建立了起来，这一篇主要上篇中没有提到或涉及不深的几个问题。1.数据集的构造。上篇是直接使用了题目给的向量，这次来根据正态分布来产生数据集。np.random.normal函数可以根据均值和方差生

avatar CSDN学习社区