学习笔记五transform

---

变形transform

通过css改变元素的形状和位置
不会影响页面布局 只动它自己

1. 平移

1. translateX(100px);沿着x轴平移100px
   > 数值可以是百分数 相当于它自己原本的位置
2. translateY();沿着y轴平移
3. translateZ();沿着z轴平移 


   > 数值越大 离我们越近

属于立体效果 若要看见效果 必须设置网页的视距

网页的视距

人眼离浏览器的距离
perspective:800px;

注意

top: 0;
            bottom: 0;
            margin: auto 0;
            left: 0;
            right: 0;
            margin: 0 auto;

这种居中方法只能用于width height已经确定时
若大小是被内容撑开的就不能用

解决
或把他设置为table 然后用 text-align和vertical-align
或者 left 50%它的包含块为html时 再用transform解决

先left:50%;但是这时会往右边偏移了自己的一半 再通过变形移动

            left:50%;
            top:50%;
            transform:translateX(-50%) translateY(-50%);

2. 旋转

ransform:

1. rotateZ(1turn)顺时针转1圈
   或可以45deg 旋转45度
   或可以100px
   都是平面
2. rotateX()在x轴上转 配合视距 是立体
3. x和z配合做出更丰富的效果
   transform: rotateY(180deg) translateZ(100px);
   这时会变小 因为先180度 所以背面对着我们 再100px 就离远了
   若transform: translateZ(100px) rotateY（180deg）;
   这时会变大 先z轴100px接近 再旋转
4. 是否显示元素的背面

transform:rotateY(180edg);
backface-visibility:hidden;

3.缩放

1. transform:scaleY（2） y方向缩放2倍
2. transform:scale（2） xy方向缩放2倍

要注意 若放大后有边框会溢出
在它的父元素中设置 overflow：hidden

在平面图中z轴缩放看不出 因为是缩放的坐标轴
若是立体可以看出

4.变形的原点

transform-origin:20px 20px;

---

实例1

将transition和tranform结合做小米图片浮动的效果

.xia .imgs li{

    transition: all .2s;
   
}
.xia .imgs li:hover{
    transform: translateX(-1px) translateY(-1px);
    box-shadow: 5px 5px 10px rgba(0, 0, 0, .3);
}

transition 渐变写在原本元素的位置
tranform变形写在hover中

---

实例2 旋转的立方体

将transition和tranform结合旋转的立方体

.cube {
            
            transform-style:preserve-3d;
            animation: run 20s infinite linear;
        }

想要实现3D立体必须加 transform-style
animation是为了实现动画 和动画帧一起用
而旋转的几个样子 都是实时的几个状态 把它们transfrom作为帧

@keyframes run {
            from {
                transform: none;
            }

            to {
                transform: rotateX(360deg) rotateZ(360deg);
            }
        }

---

总结

• transition可以和transform结合 transition写在原本中设定时间和all transform写在hover只能 translatex移动或者rotate旋转 scale缩放 形成一hover就变化的效果
  -animation和transform结合 动画帧里面写transform的 移动距离旋转角度等 在样式中annimation test 时间

若有一hover才出效果用transition
自动动画用annimation
它们用transform结合