前端笔记CSS3-（2D移动、旋转、缩放）

三种效果都可以配合过渡属性使用

一、2D移动transform:translateX();

括号内可以是数值，也可以是百分比，代表两种不同的意义；

如果是数值，则代表相对于父元素偏移的距离；

如果是百分比则是，里面元素的偏移距离就是元素自身的高或宽乘以百分比的值；

transform: translateY(50%); 

transform: translateX(50%); 

也可以合在一起书写：

transform: translate(-50%, -50%);

二、旋转transform: rotate();

  transform: rotate(45deg);

1.让图片顺时针旋转45度，如果需要逆时针，就在前面＋负号（-） 

2. 使用 transform-origin可以定义旋转的中心点，两个参数值用空格隔开，  两个值可以使方位名词，也可以是具体数值，注意中心的两个数值，使用百分比的xy的计算方式是自身盒子的宽高的百分比 。transform-origin: 75% 75%;

 

div::after {
        content: "";
        /* 添加定位放置三角位置 */
        position: absolute;
        top: 4px;
        right: 11px;
        width: 15px;
        height: 15px;
        /* 设置