CSS——变形、过渡、动画

最新推荐文章于 2022-12-30 09:46:00 发布

命中。

最新推荐文章于 2022-12-30 09:46:00 发布

阅读量576

点赞数

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

本文链接：https://blog.csdn.net/YANGMENGZHENG/article/details/120997675

版权

本文详细介绍了CSS3中的变形（transform）包括2D和3D变换，过渡（transition）的使用及属性，以及动画（animation）的创建和应用。变形允许元素在不改变布局的情况下改变形状、尺寸和位置，过渡定义了样式变化的过程，而动画则能实现更复杂的动态效果。

摘要由CSDN通过智能技术生成

（1）、transition-property

（2）、 transition-duration

（3）、transition-timing-function

前言

CSS中，过渡（transition）、变形（transform）、动画（animation）这三个属性有着类似的作用，他们各有优缺点。其中，我们可以设置过渡的参数为变形，过渡也可以用来完成只有开始状态和终点状态这两种状态的简单动画，并且需要事件触发，动画（animation）就可以完成更为复杂的动画。今天我们了解一下每一个的作用，以及他们的区别。

属性	含义
过渡（transition）	CSS 过渡允许您在给定的时间内平滑地改变属性值。和animation有着类似的效果，但细节上有很大的不同。
变形（transform）	CSS 转换（transforms）允许您移动、旋转、缩放和倾斜元素。和设置样式的动画并没有什么关系，就相当于color一样用来设置元素的“外表”
动画（animation）	css动画属性，CSS 可实现 HTML 元素的动画效果，而不使用 JavaScript 或 Flash！

一、变形（transform）

属性	描述
transform	向元素应用 2D 或 3D 转换。
transform-origin	用于指定元素变形的中心点

语法： transform:none | transform-function

none：不变形
transform-function：指定变形函数

变形操作都是以元素的中心点为基准进行的，如果需要改变这个中心点，可以使用transform-origin属性。

transform-origin: x-axis y-axis z-axis;

转换属性：

transform-origin ：用于指定元素变形的中心点

transform-style ：指定舞台为2D或3D，值为flat表示2D，preserve-3d表示3D。

注意，在变形元素自身上指定该属性是没有用的，它用于指定舞台，所以要在变形元素的父元素上设置该属性。设定后，所有子元素共享该舞台。

perspective ：指定3D的视距

指定3D的视距。默认值是none表示无3D效果，即2D扁平化。

实现3D的关键就是要有perspective视距

perspective-origin：视距的基点

基点默认值是50% 50%即center，表示视距基点在中心点不进行任何位移。

backface-visibility ：是否可以看见3D舞台背面

默认值visible表示背面可见，可以设成hidden让背面不可见。

1、2D变换

变形函数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

（1）、translate() 方法

将对象沿 X 轴和 Y 轴平移，该函数需要提供 1~2 个参数，第一个参数对应 X 轴，第二个参数对应 Y 轴，如果未提供第二个参数，则默认值为 0；两个参数均可以为负值。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        #d1{
            height: 200px;
            width: 150px;
            background-color:brown;
            border: 1px solid black;
        }
        #d2{
            height: 200px;
            width: 150px;
            background-color:brown;
            border: 1px solid black;
            transform: translate(100px,100px);

        }
    </style>
</head>
<body>
    <div id="d1">元素原来的位置
        默认中心点在元素正中心
    </div>
    <div id="d2">该 div 元素从其当前位置向右移动 100个像素，并向下移动 100 个像素。</div>
</body>
</html>

（2）、rotate() 方法

根据给定的角度顺时针或逆时针旋转元素，在函数的参数中可以指定旋转的角度。

正值表示顺时针，负值表示逆时针。


transform: rotate(30deg);

（3）、scale() 方法

将对象进行缩放，该函数需要提供 1~2 个参数，第一个参数对应 X 轴，第二个参数对应 Y 轴，如果未提供第二个参数，则默认取第一个参数的值。

scale还能设负数，负数会先将元素反转再缩放。

提示：当 scale() 中，给定的参数值在 -1~1 范围之外时，元素将被放大；当在参数值在 -1~1 范围之内时，元素将被缩小。

 transform: scale(1.8); /*缩放到原来的80% */

最低0.47元/天解锁文章

命中。

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS——变形、过渡、动画

目录前言一、变形（transform）1、2D变换（1）、translate() 方法（2）、rotate() 方法（3）、scale() 方法（4）、skew() 方法（5）、matrix() 方法2、3D变换（1）、translate3d()位移（2）、translateZ()（3）、rotate3d()旋转（4）、scale3d()缩放（5）、matrix3d()矩阵3、CSS3中实现变形的优点二、过渡（transition）1、..
复制链接

扫一扫

专栏目录