保安日记：前端学习第九篇之CSS3动画

前端学习第九篇

CSS3新特性：

8.CSS3 2D转换
转换(transform) ：是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果

• transform:translate(x,y) ：改变元素在页中的位置，类似定位

   /* 移动盒子的位置：定位 position、盒子外边距、2d转换 */
      div {
   
        width: 200px;
        height: 200px;
        background-color: pink;
        /* 通过x 、y的数值大小移动 只移动一个方向另一个数值写0 */
        transform: translate(100px, 0);
        transform: translateX(100px);
      }

注意：
1.translate最大的优点：不会影响到其他元素的位置
2.translate中的百分比单位是相对于盒子自身元素的高度宽度
3.对行内标签没有效果
4.盒子居中 translate（50%，50%）

    div {
   
        position: relative;
      }
      p {
   
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }

• transform:rotate(度数 deg) :2D旋转，就是让元素在2维平面内顺时针或逆时针旋转

  img {
   
        transform: rotate(180deg);
      }

 注意：
 1.顺时针度数为正，逆时针为负
 2.默认旋转的中心点是元素的中心点，想要其他的可以设置中心点

• transform-origin: x y; :设置元素转换的中心点

    <style>
      div {
   
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 100px auto;
        transition: all 1s;
        transform-origin: left bottom;
      }
      div:hover {
   
        transform: rotate(360deg);
      }
    </style>

注意：
1.xy之间用空格隔开
2.x y默认转换的中心点是元素的中心点（50%，50%）
3. 还可以给x y设置 像素 或者 方位名词 （top，center...）

• transform：scale（x,y） ：缩放高度和宽度

    <style>
      div {
   
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 100px auto;
      }
      /* scale的优势不会