CSS 中transform属性的应用详解

最新推荐文章于 2024-03-22 10:21:26 发布

Mr_jianghanlin

最新推荐文章于 2024-03-22 10:21:26 发布

阅读量340

点赞数

分类专栏：前端文章标签： css3 css html

本文链接：https://blog.csdn.net/mr_jianghanlin/article/details/105036692

版权

前端专栏收录该内容

23 篇文章 2 订阅

订阅专栏

transform 属性向元素应用 2D 或 3D 转换

语法格式：transform: none|transform-functions;

值	描述
none	不进行转换。
matrix(n,n,n,n,n,n)	2D 转换，使用六个值的矩阵
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	2D 转换
translate3d(x,y,z)	3D 转换。
translateX(x)	转换，只是用 X 轴的值
translateY(y)	只是用 Y 轴的值。
translateZ(z)	3D 转换，只是用 Z 轴的值。
scale(x,y)	2D 缩放转换。
scale3d(x,y,z)	3D 缩放转换。
scaleX(x)	设置 X 轴的值来定义缩放转换
scaleY(y)	设置 Y 轴的值来定义缩放转换。
scaleZ(z)	设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	2D 旋转，在参数中规定角度
rotate3d(x,y,z,angle)	3D 旋转。
rotateX(angle)	沿着 X 轴的 3D 旋转。
rotateY(angle)	沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)	沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	沿着 X 轴的 2D 倾斜转换。
skewY(angle)	沿着 Y 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图。

示例以rotate举例：


<!DOCTYPE html>
<html>
<head>
<style> 
div
{
margin:30px;
width:200px;
height:100px;
background-color:bule;

transform:rotate(30deg);
-ms-transform:rotate(30deg); /* Internet Explorer */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari 和 Chrome */
-o-transform:rotate(30deg); /* Opera */
}
</style>
</head>
<body>
<div>Hello World</div>
</body>
</html>

Mr_jianghanlin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS 中transform属性的应用详解

transform 属性向元素应用 2D 或 3D 转换语法格式：transform: none|transform-functions;值描述none不进行转换。matrix(n,n,n,n,n,n)2D 转换，使用六个值的矩阵matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)3D 转换，使用 16 个值的 4x4 矩阵。...
复制链接

扫一扫