css3-2D转换、3D转换、动画

最新推荐文章于 2024-05-23 17:56:03 发布

前端corner

最新推荐文章于 2024-05-23 17:56:03 发布

阅读量117

点赞数 1

分类专栏： css 文章标签： css3 动画 css

本文链接：https://blog.csdn.net/laplacepoisson/article/details/120805876

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

css3-2D转换、3D转换、动画

一、2D转换

1.位移translate

div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* transform: translate(100px,100px); */
            /* transform: translate(100px,0); */
            /* transform: translateX(100px); */
            /* transform: translateY(100px); */
        }
        div:last-child {
            background-color: purple;
        }
        div:first-child {
            /* translate(X,Y) */
            transform: translate(30px,30px);
        }
/*
<body>
    <div></div>
    <div></div>
</body>
*/

应用：让盒子实现水平垂直居中

绝对定位+负位移实现盒子水平垂直居中


/*
<body>
    <div>
        <p></p>
    </div>
    <span>123</span>

</body>
*/
div {
        position: relative;
        width: 500px;
        height: 500px;
        background-color: pink;
        /* 百分比是相对自身宽度和高度的 */
        /* transform: translate(50%,50%); */
    }

    p {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 200px;
        height: 200px;
        background-color: purple;
        /* 不需要计算 */
        transform: translate(-50%, -50%);

    }
    span {
        /* translate对行内元素无效 */
        transform: translate(300px,300px);
    }

旋转rotate()

/*
<body>
    <img src="./media/pic.jpg" alt="">
</body>
*/
img {
        width: 150px;
        transform: rotate(45deg);
        border-radius: 50%;
        border: 5px solid pink;
        /* 过渡写到本身上，谁做动画给谁加 */
        transition: all 2s;
    }
    img:hover {
        transform: rotate(360deg);
    }

转换中心点transform-origin

/*
<body>
    <div></div>
</body>
*/
div {
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 100px auto;
        transition: all .7s;
        /* 1.可以跟方位名词 */
        /* transform-origin: left bottom; */
        /* 2.默认 50% 50% 等价于 center center */
        /* 3. 可以是像素 */
        transform-origin: 50px 50px;
    }
    div:hover {
        transform: rotate(360deg);
    }

缩放scale

优点：！！！！不会影响其他盒子，还可以设置中心点！！！！

/*结构
<body>
    <div></div>
    123
</body>
*/

div {
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 100px auto;
    }

    div:hover {
        /* 1.里面写数字不跟单位，数字就是倍数的意思 2就是2倍*/
        /* transform: scale(2,2); */
        /* 2.修改了高度为原来的2倍，高度不变 */
        /* transform: scale(2,1); */
        /* 3.等比例缩放，同时修改高度和宽度，简单写法如下 */
        /* transform: scale(2); */
        /* 4.缩小 小于1就是缩小 */
        transform: scale(0.5);
        /* scale优势：不会影响其他盒子，而且可以设置缩放中心点 */
    }

应用一：鼠标经过图片放大效果

/*结构
<body>
    <div><a href="javascript:;"><img src="media/scale.jpg" alt=""></a></div>
</body>
*/

div {
        overflow: hidden;
        float: left;
        margin: 10px;
    }
    div img {
        transition: all .5s;
    }
    div img:hover {
        transform: scale(1.1);
    }

应用二：分页按钮鼠标经过放大

/*结构
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</body>
*/

li {
        float: left;
        width: 30px;
        height: 30px;
        border: 1px solid pink;
        text-align: center;
        line-height: 30px;
        list-style: none;
        border-radius: 50%;
        margin: 10px;
        cursor: pointer;
        transition: all .2s;
    }
li:hover {
        transform: scale(1.1);
    }

2D转换综合写法顺序

同时位移和其他属性，需要把位移放到最前面!!!

/*
<body>
    <div></div>
</body>
*/

div {
            width: 200px;
            height: 200px;
            background-color: pink;
            transition: all .5s;
        }
div:hover {
            /* 同时位移和其他属性，需要把位移放到最前面 */
            transform: translate(150px,150px) rotate(180deg) scale(2);
        }

二、3D转换

3D移动translate3d()

1、透视写到被观察元素的父盒子上

2、translateZ 后面单位一般跟px,正值向外移动

/*
<body>
    <div></div>
</body>
*/

body {
            /* 透视写到被观察元素的父盒子上 */
            perspective: 200px;
        }
div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* transform: translateX(100px); */
            /* transform: translateY(100px); */
            /* transform: translateX(100px) translateY(100px) translateZ(100px); */
            /* 1.translateZ 后面单位一般跟px,正值向外移动 */
            transform: translate3d(400px,100px,100px);
        }

3d旋转rotateX

旋转方向：左手准则，大拇指指向坐标轴方向，四指弯曲方向即旋转方向

/*结构
<body>
    <img src="media/pig.jpg" alt="">
</body>
*/

body {
            perspective: 500px;
        }
img {
            display: block;
            margin: 100px auto;
            transition: all 1s;
        }
img:hover {
            /* 旋转方向：左手准则，大拇指指向坐标轴方向，四指弯曲方向即旋转方向 */
            transform: rotateX(180deg);
        }

3d旋转rotateY

/*
<body>
    <img src="./media/pig.jpg" alt="">
</body>
*/

body {
            perspective: 500px;
        }
img {
            display: block;
            margin: 100px auto;
            transition: all 1s;
        }
img:hover {
            /* 旋转方向：左手准则，大拇指指向坐标轴方向，四指弯曲方向即旋转方向 */
            transform: rotateY(180deg);
        }

3d旋转rotateZ

/*
<body>
    <img src="./media/pig.jpg" alt="">
</body>
*/

body {
            perspective: 500px;
        }
img {
            display: block;
            margin: 100px auto;
            transition: all 1s;
        }
img:hover {
            /* 旋转方向：左手准则，大拇指指向坐标轴方向，四指弯曲方向即旋转方向 */
            transform: rotateZ(180deg);
            /* transform: rotate3d(1,1,1,180deg); */
        }

3d呈现transform-style

/*
<body>
    <div class="box">
        <div></div>
        <div></div>
    </div>
</body>
*/

body {
            perspective: 500px;
        }
.box {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            transition: all 2s;
            /* 代码写给父级，影响的是子盒子，使保持3d立体 */
            transform-style: preserve-3d;
        }
.box:hover {
            transform: rotateY(60deg);
        }
.box div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: pink;
        }
.box div:last-child {
            background-color: purple;
            transform: rotateX(60deg);
        }

效果如下

在这里插入图片描述

三、css动画

定义和调用动画（@keyframes 、 animation）

/*结构
<body>
    <div></div>
</body>
*/

/* 我们想页面一打开，一个盒子就从左边走到右边 */
/* 1.定义动画 @keyframes*/
@keyframes move {
    0% {
        transform: translateX(0px);
    }
    100% {
        transform: translateX(1000px);
    }
}
div {
    width: 200px;
    height: 200px;
    background-color: pink;
    /* 2.调用动画 持续时间 */
    animation-name: move;
    animation-duration: 2s;
}

动画序列

@keyframes

animation-name

animation-duration

/*结构
<body>
    <div></div>
</body>
*/

/* from to 等价于0%和100% */
/* @keyframes move {

from {
transform: translate(0,0);
}
to {
transform: translate(1000px,0);
}
} */
/* 动画序列 */
/* 1. keyframes关键帧 可以做多个状态的变化*/
/* 2.百分比要是整数 */
/* 3.里面的百分比就是总时间的划分 */
@keyframes move {
    0% {
        transform: translate(0,0);
    }
    25% {
        transform: translate(1000px,0);
    }
    50% {
        transform: translate(1000px,500px);
    }
    75% {
        transform: translate(0,500px);
    }
    100% {
        transform: translate(0,0);
    }
}
div {
    width: 100px;
    height: 100px;
    background-color: pink;
    animation-name: move;
    animation-duration: 1s;
}

css3动画属性

animation-name

动画名称 animation-name: move;

animation-duration

持续时间animation-duration: 2s;

animation-timing-function

运动曲线默认easeanimation-timing-function: ease;

animation-delay

何时开始animation-delay: 1s;

animation-iteration-count

播放次数animation-iteration-count: infinite;

animation-direction

是否逆向播放默认normalanimation-direction: alternate;

animation-fill-mode

动画结束后状态默认：backwards 保持结束状态：forwards animation-fill-mode: forwards;

前2个属性 name duration不能省

animation: name duration timing-function delay iteration-count direction fill-mode

animation: move 2s linear alternate forwards;

animation-play-state

/*结构
<body>
    <div></div>
</body>
*/

@keyframes move {
    from {
        transform: translate(0,0);
    }
    to {
        transform: translate(1000px,0);
    }
}
div {
    width: 100px;
    height: 100px;
    background-color: pink;
}
div:hover {
    /* 鼠标经过div动画停止 */
    animation-play-state: paused;
}

打字机案例

让文字强制一行显示white-space: nowrap;

steps 就是分几步完成动画

/*
<body>
    <div>我这是为了凑出十个字</div>
</body>
*/

div {
    /* 隐藏盒子外文字 */
    overflow: hidden;
    font-size: 20px;
    width: 0;
    height: 30px;
    background-color: pink;
    /* 让文字强制一行显示 */
    white-space: nowrap;
    /* animation: w 4s linear forwards; */
    /* steps 就是分几步完成动画 */
    animation: w 3s steps(10) forwards;
}
@keyframes w {
    0% {
        width: 0;
    }
    100% {
        width: 200px;
    }
}

元素可以添加多个动画，用逗号分隔

animation: bear 1s steps(8) infinite, move 5s forwards;

前端corner

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
css3-2D转换、3D转换、动画

css3-2D转换、3D转换、动画一、2D转换1.位移translate应用：让盒子实现水平垂直居中旋转rotate()转换中心点transform-origin缩放scale优点：！！！！不会影响其他盒子，还可以设置中心点！！！！应用一：鼠标经过图片放大效果应用二：分页按钮鼠标经过放大2D转换综合写法顺序同时位移和其他属性，需要把位移放到最前面!!!二、3D转换3D移动translate3d()1、透视写到被观察元素的父盒子上2、translateZ 后面单位一般跟px,正值向外移动3d旋转rotateX
复制链接

扫一扫