CSS3 3d特效学习笔记

最新推荐文章于 2022-08-05 19:42:36 发布

HitTheZone

最新推荐文章于 2022-08-05 19:42:36 发布

阅读量523

点赞数

分类专栏：学习笔记文章标签： css3 动画

本文链接：https://blog.csdn.net/citunying6597/article/details/76909668

版权

学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

CSS3 3d特效学习笔记

慕课网视频教程

CSS3的动画功能

transition 从一个属性值平滑地过渡到另一个属性值
animation 主要用于实现关键帧动画，产生更加复杂的动画效果

一、transition

1.transition:<过渡属性名称><过渡时间>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <style>
        #block{
            width:400px;
            height:400px;
            background-color: #69c;
            margin: 0 auto;

            /*设置背景颜色的渐变*/
            -webkit-transition: background-color 2s;
            transition: background-color 2s;
            /*等价于：
            transition-property:background-color;
            transition-duration:2s;
            */
        }

        #block:hover{
            background-color: indianred;
        }
    </style>

</head>
<body>
    <div id="block">

    </div>
</body>
</html>

2.多个属性的过渡效果

translation:<属性名1><过渡时间1>,<属性名2><过渡时间2>
translation:<属性名1><过渡时间1>;
translation:<属性名2><过渡时间2>;

3.translation过渡模式

translation:<属性名称><过渡时间><过渡模式>

ease 缓慢开始，缓慢结束 (default)
linear 匀速
ease-in 缓慢开始
ease-out 缓慢结束
ease-in-out 缓慢开始，缓慢结束

二、创建简单的3D场景

1.设置3d场景

-webkit-perspective:800px;
-webkit-perspective-origin:50% 50%;//视点的位置

这里写图片描述

2.使用transform属性调整元素

-webkit-transform-style:preserve-3d;

(1)translate

translateX(x px)
translateY(y px)
translateZ(z px)

(2)rotate

rotateX(x deg)
rotateY(y deg)
rotateZ(z deg)

这里写图片描述

三维平移实例

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        #experiment{
            -webkit-perspective: 800px;
            -webkit-perspective-origin: 50% 50%;

            -webkit-transition: -webkit-transform 1s linear;
            -webkit-transform-style:preserve-3d;
        }
        #block{
            width:150px;
            height:150px;
            background-color: #69c;
            margin:170px auto;

        }
        #op{
            margin:0 auto;
            font-size:16px;
            font-weight:bold;
            width:800px;
        }
        #op .range-control{width:721px;}
    </style>

    <script type="text/javascript">
        function translateall(){
            var x = document.getElementById("translatex").value;
            var y = document.getElementById("translatey").value;
            var z = document.getElementById("translatez").value;

            document.getElementById('block').style.webkitTransform = "translateX("+x+"px) translateY("+y+"px) translateZ("+z+"px)";

            document.getElementById('translatex-span').innerText = x;
            document.getElementById('translatey-span').innerText = y;
            document.getElementById('translatez-span').innerText = z;
        }
    </script>
</head>
<body>
<div id="experiment">
    <div id="block">
    </div>
</div>
<div id="op">
    <p>translate x: <span id="translatex-span">0</span> px</p>
    <input type="range" min="-360" max="360" id="translatex" value="0" class="range-control" onchange="translateall()" /><br/>
    <p>translate y: <span id="translatey-span">0</span> px</p>
    <input type="range" min="-360" max="360" id="translatey" value="0" class="range-control" onchange="translateall()" /><br/>
    <p>translate z: <span id="translatez-span">0</span> px</p>
    <input type="range" min="-360" max="360" id="translatez" value="0" class="range-control" onchange="translateall()" /><br/>
</div>
</body>
</html>

3.使用transform-origin调整旋转中心
（1）x轴

left
center
right

（2）y轴

top
center
bottom

（3）z轴
length px

三、页面3d切换实例

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        #my3dspace {
            -webkit-perspective: 800px;
            -webkit-perspective-origin: 50% 50%;
            overflow: hidden;
        }

        #pagegroup {
            width: 400px;
            height: 400px;
            margin: 0 auto;
            -webkit-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 {
            -webkit-transform-origin: bottom;
            -webkit-transition: -webkit-transform 1s linear;
        }

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

        #op {
            text-align: center;
            margin: 40px auto;
        }
    </style>
</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>

    <script type="text/javascript">

        var curIndex = 1;

        function next() {

            if (curIndex === 6)
                return;

            var curPage = document.getElementById("page" + curIndex);
            curPage.style.webkitTransform = "rotateX(-90deg)";

            curIndex++;
            var nextPage = document.getElementById("page" + curIndex);
            nextPage.style.webkitTransform = "rotateX(0deg)";
        }

        function prev() {

            if (curIndex === 1)
                return;

            var curPage = document.getElementById("page" + curIndex);
            curPage.style.webkitTransform = "rotateX(90deg)";

            curIndex--;
            var prevPage = document.getElementById("page" + curIndex);
            prevPage.style.webkitTransform = "rotateX(0deg)";
        }
    </script>
</body>
</html>