transform转换

最新推荐文章于 2023-03-14 22:30:05 发布

我的哥哥呦

最新推荐文章于 2023-03-14 22:30:05 发布

阅读量891

点赞数 2

CC 4.0 BY-SA版权

分类专栏： H5C3 文章标签： transform-translate transform-scale transform-origin transform-rotate transform-skew

本文链接：https://blog.youkuaiyun.com/qq_20497071/article/details/97611244

H5C3 专栏收录该内容

52 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		div{
			width: 100px;
			height: 100px;
			background-color: red;
			margin-left: 200px;
			margin-top: 10px;
			/* 过渡效果 */
			transition: transform 2s;
		}
		div:first-of-type:active{
			/* 使用transform实现元素的移动
			 1.如果只有一个参数就代表x方向
			 2.如果有两个参数就代表x/y方向*/
			/* transform: translate(0px,500px); */
			
			/* 添加水平或垂直方向的移动 */
			/* transform: translateX(200px); */
			transform: translateY(200px);
		}
		
		/* scale:缩放 */
		div:nth-of-type(2):active{
			/* 实现缩放  1不缩放，>1.01放大  <0.99缩小  参照元素几何中心放大
			 1.如果只有一个参数，x/y实现相等缩放
			 2.如果两个参数，代表x/y方向*/
			 /* transform: scaleX(2);
			 transform: scaleY(2); */
			 transform: scale(1,0.2);
		}
		/* rotate:旋转 */
		div:nth-of-type(3):active{
			/* 设置旋转轴心
			 1.x/y
			 2.关键字：left top right bottom center*/
			 transform-origin: left top;
			 background-color: pink;
		}
		div:nth-of-type(3):active{
			transform: rotate(360deg);
		}
		/* skew：斜切 */
		div:nth-of-type(4):active{
			background-color: blue;
			/* transform: skew(30deg); */
			transform: skew(30deg,-30deg);
		}
	</style>
</body>
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</html>