变形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:
- rotateZ(1turn)顺时针转1圈
或可以45deg 旋转45度
或可以100px
都是平面 - rotateX()在x轴上转 配合视距 是立体
- x和z配合做出更丰富的效果
transform: rotateY(180deg) translateZ(100px);
这时会变小 因为先180度 所以背面对着我们 再100px 就离远了
若transform: translateZ(100px) rotateY(180deg);
这时会变大 先z轴100px接近 再旋转 - 是否显示元素的背面
transform:rotateY(180edg);
backface-visibility:hidden;
3.缩放
- transform:scaleY(2) y方向缩放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结合