css3系列之transform

最新推荐文章于 2024-08-03 22:01:17 发布

星繁~

最新推荐文章于 2024-08-03 22:01:17 发布

阅读量176

点赞数

分类专栏： # css 文章标签： css3

本文链接：https://blog.csdn.net/m0_38010595/article/details/113573992

版权

css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

transform(变形)是CSS3中的元素的属性
transform的属性值主要包括旋转（rotate）、扭曲（skew）、缩放（scale）和移动（translate）以及矩阵变形（matrix）

translate：参考自己的位置进行平移

translateX
向X轴平移，填正数往右平移，填负数，往左平移
translateY
向Y轴平移，填正数往下平移，填负数，往上平移
translate(x,y)  定义2D变换
translate3d(x,y,z)	定义 3D 转换

可以利用该属性达到水平垂直居中的效果

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
	<style>
		.parent{
		    position:relative;
		    width:200px;
			height:200px;
			background-color:blue;
		}
		.child{
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%); 
		 height:50%;
		 width:50%;
		 background-color:green;
		}
	</style>
</head>
<body>

	<div class="parent">
		<div class="child"></div>
	</div>  

</body>
</html>

scale:缩放

scale(x,y)	定义 2D 缩放转换
scale3d(x,y,z)	定义 3D 缩放转换。

rotate:旋转

rotate(angle)	        定义 2D 旋转，在参数中规定角度
rotate3d(x,y,z,angle)	定义 3D 旋转

skew:扭曲

skew(x轴angle,y轴angle)  定义沿着 X 和 Y 轴的 2D 倾斜转换。

matrix:矩阵变形

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 矩阵

星繁~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
css3系列之transform

transform(变形)是CSS3中的元素的属性，transform的属性值主要包括旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrixtranslate：参考自己的位置进行平移translateX向X轴平移，填正数往右平移，填负数，往左平移translateY向Y轴平移，填正数往下平移，填负数，往上平移translate(x,y) 定义2D变换translate3d(x,y,z) 定义 3D 转换可以利用该属性达到水平垂直居中的效果<
复制链接

扫一扫