首页 > 代码库 > CSS3学习总结3-3D与动画

CSS3学习总结3-3D与动画

2024-08-22 01:22:52   223人阅读

前言：这是篇CSS3中关于3D效果与动画相关的内容。

（1）在CSS3的3D效果中，需要结合透视perspective的属性才能看到3d的效果，这个属性在屏幕上实现了元素近大远小的效果，所以要使用CSS3的3d相关属性，需要记得写perspective。

（2）在CSS3的3d坐标系与数学中的坐标系有所区别，主要是在y轴正方向的规定上。

  • x轴正方向：从左往右
  • y轴正方向：从上至下
  • z轴正方向：从里至外

旋转

在C3的2D变换中，rotate代表了元素围绕Z轴旋转一个角度，3d中还有围绕X和Y轴旋转。

1.rotateX：值 单位：deg

让元素围绕着X轴进行旋转

  • 人眼正视X轴正方向，正值是顺时针方向，负值时逆时针方向。
  • 没有透视的3D是看不出来方向
  • 加perspective后看到的效果就是正值元素向屏幕里倒，负值向屏幕外倒。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            perspective: 600px;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 100px auto;
            transform: rotateX(45deg);
            transition: all ease .5s;
        }
        .box:hover{
            transform: rotateX(-45deg);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

2.rotateY:值

围绕着Y轴进行旋转

  • 正数是逆时针 （站在右边推门），负数是顺时针（站在左边推门）
  • 人眼正视y轴正方向，正值是顺时针方向，负值时逆时针方向。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            perspective: 600px;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 100px auto;
            transform: rotateY(45deg);
            transition: all ease .5s;
        }
        .box:hover{
            transform: rotateY(-45deg);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

3.rotate3d(x,y,z,deg);

rotate3d将rotateX，rotateY，rotateZ3个属性结合起来写，它的参数值x、y、z表示了旋转的3个方向，取值是0～1，deg表示了旋转的角度。（这个属性的具体用法目前不太会使用，使用时经常不能出现预期结果，可能使用方式不对，以后研究。）

平移

在2d变换中translateX和translateY，代表沿X轴和Y轴平移，3d中还有translateZ，沿Z轴平移。

translateZ

就是在Z轴上来回移动，但是如果没有透视的情况下，完全看不出效果，所以，一般transform：translateZ（）都是配合透视一起使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            perspective: 900px;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 100px auto;
            transition: all 2s;
        }
        .current{
            /*transform: rotateX(360deg) translateZ(500px);*/
            transform:translateZ(500px) rotateX(360deg);
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <button>点我呀</button>
    <script type="text/javascript">
    var btn = document.querySelector(‘button‘);
    var box = document.querySelector(‘.box‘);
    btn.onclick = function(){
        box.classList.add(‘current‘);
    }
    </script>
</body>
</html>

其它：translateZ和rotate结合会产生不一样的3D效果，不同的顺序的效果截然不同，如果先rotate 在translateZ 元素是在空间里面发生旋转 而如果是translateZ在rotate 元素是在直线上发生旋转。

其它3D相关属性

1.透视：perspective:值

距离屏幕的多远看元素，实现近大远小的效果。

说明：透视值越小，透视效果越强，值越大，透视效果越弱，透视添加在父级身上

2.透视点 perspective-origin：值

最后看看到透视消失的地方，值可以是像素，也可以是百分比，还可以是方位名词，默认值是50%，50%（中心点）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 155px;
            height: 220px;
            border: 1px solid #000;
            margin: 100px auto;
            /* 说明：透视值越小，透视效果越强，值越大，透视效果越弱，透视添加在父级身上 */
            perspective: 1px;
            perspective-origin: 50% 50%;
        }
        img{
            transition: all 1s;
            transform-origin: bottom;
        }
        .box:hover img{
            transform: rotateX(45deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <img src=http://www.mamicode.com/"image/shu.jpg" alt="">
    </div>
</body>
</html>

3.transform-style

规定被嵌套元素如何在3D空间中显示:flat是默认值，让子元素不保留其3D位置， preserve-3d 让子元素保留其3D位置 ，加在父亲身上.

小总结：透视 灭点 transform-style都是添加在父级身上，当元素发生3D翻转的时候，整个坐标系也跟着发生了翻转。

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            perspective: 900px;
        }
        .box{
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            margin: 100px auto;
            perspective: 900px;
            transform: rotateY(70deg);
            transform-style: preserve-3d;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 50px auto;
            transform: rotateX(45deg);
            transform-origin: top;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1"></div>
    </div>
</body>
</html>

动画 animation：值

animation属性有8个参数值：

  1. animation-name:自定义动画名
  2. animation-duration:动画的持续时间 单位是s或者ms
  3. animation-timing-function:动画的曲线
  4. animation-delay:动画从何时开始
  5. animation-iteration-count:控制动画执行的次数 没有单位， 一直执行：infinite
  6. aniamtion-direction:控制动画是否逆序播放 默认值normal 逆序：alternate
  7. animation-play-state:控制动画的播放和暂停 默认值是播放：running 暂停：paused
  8. animation-fill-mode:动画最后的停留位置 forwards 让动画停留在最后一帧

动画一定要先写animation 然后搭配@keyframes去写自定义的动画。 注意：animation和@keyframes最好都添加私有前缀。 示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            position: absolute;
            left: 100px;
            top: 100px;
            background-color: pink;
            /* -webkit-animation: feifei 2s linear 0s;
            -moz-animation: feifei 2s linear 0s;
            -ms-animation: feifei 2s linear 0s;
            -o-animation: feifei 2s linear 0s; */
            animation: feifei 2s linear 0s;
        }
        /* 单组动画 */             
        @keyframes feifei{
            from{
                width: 200px;
                height: 200px;
                transform: rotate(0deg);
            }
            to{
                width: 400px;
                height: 400px;
                transform: rotate(360deg);
            }
        } 
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

如果使用@keyframes规定了多组动画规则，animation也可以同时添加这些组动画，之间只需要用‘，’隔开即可。

CSS3学习总结3-3D与动画


联系
我们