HTML5开发系列之 Transform

最新推荐文章于 2023-06-14 20:54:09 发布

启之灵

最新推荐文章于 2023-06-14 20:54:09 发布

阅读量1k

点赞数

分类专栏： Html 5

本文链接：https://blog.csdn.net/z_x_Qiang/article/details/82821703

版权

本文详细介绍了HTML5中的Transform特性，包括2D变形的三个主要方面：translate平移，scale缩放和rotate旋转。平移通过控制x和y实现元素位置变化；缩放则可以放大或缩小元素；旋转支持顺时针和逆时针操作，结合透视属性可实现3D效果。

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

Transform （2D变形）

1.translate 平移

控制属性为x和y

控制xy属性的时候使用百分比的话，是相对自己的尺寸的；

移动的距离是相对当前盒子的显示位置的；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height:200px;
				background-color: pink;
				transition: all;
				transition-duration: 500ms;
				position: absolute;
				left: 50%;
				top: 50%;
				/*以前的做法是设置负数的margin;但是这种需要计算;*/
				/*margin-left: -100px;
				margin-top: -100px;*/
				/*现在的做法是直接使用transform ,这个百分度是相对自己的;*/
				transform: translate(-50%, -50%);
			}
			div:active{
				transform: translate(100px,200px);  /*通常是和transition搭配使用的;这里的移动距离是相对盒子当前的位置*/
			}
		</style>
	</head>
	<body>
		<div >
			
		</div>
	</body>
</html>

2. 缩放scale

缩放的值小于1表示缩小

最低0.47元/天解锁文章

启之灵

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5开发系列之 Transform

Transform （2D变形）1.translate 平移控制属性为x和y控制xy属性的时候使用百分比的话，是相对自己的尺寸的；移动的距离是相对当前盒子的显示位置的；&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title..
复制链接

扫一扫