CSS3之过渡、2D 转换和3D转换

最新推荐文章于 2022-07-22 09:03:29 发布

步入飞花

最新推荐文章于 2022-07-22 09:03:29 发布

阅读量170

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_42646178/article/details/119387959

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.transition过渡

可以实现不同元素间的平滑过渡效果，比如：

补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态。
帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片。

transition包括的属性：

transition-property: all; 如果希望所有的属性都发生过渡，就使用all。
transition-duration: 1s; 过渡的持续时间。
transition-timing-function: linear; 运动曲线。属性值可以是：
- linear 线性
- ease 减速
- ease-in 加速
- ease-out 减速
- ease-in-out 先加速再减速
transition-delay: 1s; 过渡延迟。多长时间后再执行这个过渡动画。
上面的四个属性也可以写成综合属性：

	transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;

	transition: all 3s linear 0s;

案例1：一个盒子宽度变长的过渡效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: grey;
            /* 过渡的属性是宽度 */
            transition-property: width; 
            /* 过渡的持续时间是1秒 */
            transition-duration: 1s;
            /* 运动的曲线是线性 */
            transition-timing-function: linear;
            /* 1秒后开始 */
            transition-delay: 1s;
        }
        .box1:hover {
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="box1">
    </div>
</body>
</html>

效果：
在这里插入图片描述
案例2：一个盒子多个属性的过渡效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: grey;
            /* 过渡的属性是宽度 */
            transition-property: all; 
            /* 过渡的持续时间是1秒 */
            transition-duration: 1s;
            /* 运动的曲线是线性 */
            transition-timing-function: linear;
            /* 1秒后开始 */
            transition-delay: 1s;
        }
        .box1:hover {
            width: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box1">
    </div>
</body>

效果： 在这里插入图片描述

2.2D 转换

转换是 CSS3 中具有颠覆性的一个特征，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式。
转换再配合过渡和动画，可以取代大量早期只能靠 Flash 才可以实现的效果。
在 CSS3 当中，通过 transform 转换来实现 2D 转换或者 3D 转换。

2.1缩放：scale

语法：

	transform: scale(x, y);
	transform: scale(2, 0.5);

参数解释： x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放。
案例1：宽度变大一倍，高度缩小一倍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: greenyellow;
        }
        .box:hover {
            transform: scale(2, 0.5);
        }
    </style>
</head>
<body>
    <div class="box">

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

效果：
在这里插入图片描述

2.2位移：translate

语法：

	transform: translate(水平位移, 垂直位移);
	transform: translate(-50%, -50%);

参数为百分比，相对于自身移动。
正值：向右和向下。负值：向左和向上。如果只写一个值，则表示水平移动。
案例1： 想右下偏移50%

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: greenyellow;
        }
        .box:hover {
            transform: translate(50%, 50%);
        }
    </style>
</head>
<body>
    <div class="box">

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

效果：
在这里插入图片描述

2.3旋转：rotate

语法：

	transform: rotate(角度);
	transform: rotate(45deg);

参数解释： 正值顺时针；负值：逆时针。

3D 转换

3.1旋转：rotateX、rotateY、rotateZ

分别对应着x、y、z轴旋转
案例1： 绕着X轴旋转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        img {
            width: 200px;
            /* 过渡*/
            transition: transform 2s;
        }
        img:hover {
            transform: rotateX(360deg);
        }
    </style>
</head>
<body>
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F4495e731345f73cb023b1d70197d50e7f451dbc91a88e-UU7MfN_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630722649&t=be97ab20c2c9210d9fdf9c59edcaea48" alt="">
</body>
</html>

效果：
在这里插入图片描述
案例2： 实现精灵图效果
思路： 通过绝对定位将两个box1和box2定位在一个位置，让其显示同一张背景图，box1显示背景图的左边，box2显示背景图的右边，默认情况下通过rotateY旋转180将box2隐藏显示box1的内容，达到显示左半边的效果，然后点击的时候又隐藏box1显示box2右半边的内容达到显示右半边的效果
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        body {
            background-color: cornflowerblue;
        }
        .box {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            margin: 50px auto;
            position: relative;
        }
        .box > div {
            width: 100%;
            height: 100%;
            position: absolute;
            border: 1px solid #000;
            border-radius: 50%;
            transition: all 2s;
            backface-visibility: hidden;
        }
        
        .box1 {
            background: url(./img/img1.png) left 0 no-repeat; /*默认显示图片的左半边*/
        }

        .box2 {
            background: url(./img/img1.png) right 0 no-repeat;
            transform: rotateY(180deg); /*让图片的右半边默认时，旋转180度，就可以暂时隐藏起来*/
        }
        
        .box:hover .box1 {
            transform: rotateY(180deg); /*让图片的左半边转消失*/
        }

        .box:hover .box2 {
            transform: rotateY(0deg); /*让图片的左半边转出现*/
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>
</html>

效果：
在这里插入图片描述

3.2移动：translateX、translateY、translateZ

语法：

	transform: translateX(100px);    //沿着 X 轴移动

	transform: translateY(360px);    //沿着 Y 轴移动

	transform: translateZ(360px);    //沿着 Z 轴移动

步入飞花

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录