笔记css二

一、CSS：transform属性

1、位移translate

translate是改变标签在二维平面上的位置和形状；

x：在x轴上水平移动；

y：在y轴上水平移动；

translate中的100%单位，是相对于本身的宽度和高度来进行计算的；

优点:不影响其他元素的位置

div{
background-color:pink;
width:200px;
height:100px;
 /* 水平垂直移动 100px */
 /* transform: translate(100px, 100px); */
 /* 水平移动 100px */
 /* transform: translate(100px, 0) */
/* 垂直移动 100px */
  /* transform: translate(0, 100px) */

  /* 水平移动 100px */
  /* transform: translateX(100px); */
}

 transform: translate(x, y)
  transform: translateX(n)
transfrom: translateY(n)  

2、旋转rotate（单位：deg）

/* 单位是：deg */
img:hover {
  transform: rotate(360deg)
}

默认旋转的中心点时元素地点中心点，x y 默认旋转的中心点是元素的中心(50% 50%) ；

设置元素旋转的中心的(transform-origin) ；

注意：x与y中间的空格

transform-origin：x y；

3、缩放scale

transform: scale(x, y)

注意：x与y中间的逗号

【transform: scale(1, 1): 宽高都放大一倍，相当于没有放大

transform: scale(2, 2): 宽和高都放大了二倍

transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致

transform:scale(0.5, 0.5): 缩小】

4、倾斜skew

二、综合写法：

同时使用多个转换，其格式为 transform: translate() rotate() scale()