CSS笔记（二）------变换 transform

最新推荐文章于 2022-10-16 12:01:19 发布

Favour72

最新推荐文章于 2022-10-16 12:01:19 发布

阅读量291

点赞数 2

分类专栏： CSS 文章标签：前端大前端 css css3 html5

本文链接：https://blog.csdn.net/weixin_45904557/article/details/123551074

版权

CSS 专栏收录该内容

17 篇文章 6 订阅

订阅专栏

transform: rotate | scale | skew | translate;

属性之间用空格隔开注意：不是逗号“，”

1. 移动translate（x，y）

水平移动translateX（）

垂直移动translateY（）

X值为正往左，负往右
   Y值为正往下，负往上
   同一个属性不同的值下面的值会把上面的盖住
   简写：translate（值1，值2）逗号隔开，值1是x，值2是y（斜着走）
   写一个值是x

举个栗子：

.box{
				width: 200px;height: 200px;
				background-color: pink;
				transition: 2s;
			}
			.box:hover{
				transform: translate(600px,600px);
			}
		</style>

	</head>
	<body>
		<div class="box"></div>

效果如下：

使用移动居中

           .box{
               position: relative;
               width: 500px;height: 500px;
               background-color: #00FFFF;
           }
           .box1{
               position: absolute;
               left: 50%;
               top: 50%;
               width: 100px;height: 100px;
               background-color: #FFC0CB;
               transform: translate(-50%,-50%);
           }

2. 旋转 rotate（）

       rotateX（数值+角度deg）
绕X轴旋转
       rotateY（数值+角度deg）
绕Y轴旋转
       rotateZ（数值+角度deg）
绕Z轴旋转

写一个值是Z轴旋转

如果要使之具有 3D效果 perspective透视

3.缩放

scale（值）写一个值是等比例缩放
scale（x，y）
       scaleX（缩放倍数） X方向缩放
       scaleY（缩放倍数）

       大于0小于1是缩小，大于1是放大
       等于1是不变 0是0

4. 扭曲skew（）

skewX(数值+单位deg)
skewY(数值+单位deg)

5.变换基点
transform-origin：x y

改变元素基点transform-origin

transform-origin:X Y

(1) transform-origin:left top:

(2) transform-origin:right

(3) transform-origin:25% 75%

Favour72

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS笔记（二）------变换 transform

transform: rotate | scale | skew | translate;属性之间用空格隔开注意：不是逗号“，”1. 移动translate（x，y）水平移动translateX（）垂直移动translateY（） X值为正往左，负往右 Y值为正往下，负往上同一个属性不同的值下面的值会把上面的盖住简写：translate（值1，值2）逗号隔开，值1是x，值2是y（斜着走写一个值是x...
复制链接

扫一扫