css3属性之2D转换、3D转换、过度、动画

最新推荐文章于 2021-11-12 17:47:01 发布

夕阳下美了剪影

最新推荐文章于 2021-11-12 17:47:01 发布

阅读量290

点赞数

本文链接：https://blog.csdn.net/qq_38401285/article/details/79546129

版权

1、2D转换（可以对元素进行旋转、平移、缩放、转动。）

Internet Explorer 10, Firefox, 和 Opera支持transform 属性.

Chrome 和 Safari 要求前缀 -webkit- 版本.

注意： Internet Explorer 9 要求前缀 -ms- 版本.

transform：translate（x,y）;//x代表沿x轴平移的距离，y代表沿y轴平移的距离

transform:rotate(deg);//deg代表旋转度数，如果为正数时，顺时针旋转；为负数时逆时针旋转

transform:scale(x,y);//x，y分别代表width和height的放大倍数

translate:skew(x,y);x代表水平方向旋转度数，y代表垂直方向旋转度数。

2、3D转换

translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。

3、css3过渡transition （表示元素从一种样式过渡为另一种样式，必须要有指定添加效果的css属性和过渡时间）

例如：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
transition:width 2s;
}
div:hover{
width: 400px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
</body>

</html>

4、css3动画animation @keyframes规则指定一个css样式和动画从目前样式转换为新的样式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>@keyframes动画</title>
<style>
div{
width: 150px;
height: 150px;
background-color: yellow;
animation:myanimation 2s;
-webkit-animation:myanimation 2s;
}
@keyframes myanimation{
form{background-color: yellow;}
to{background-color: red;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

夕阳下美了剪影

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3属性之2D转换、3D转换、过度、动画

1、2D转换（可以对元素进行旋转、平移、缩放、转动。）Internet Explorer 10, Firefox, 和 Opera支持transform 属性.Chrome 和 Safari 要求前缀 -webkit- 版本.注意： Internet Explorer 9 要求前缀 -ms- 版本.transform：translate（x,y）;//x代表沿x轴平移的距离，y代表沿y轴平移的距离...
复制链接

扫一扫