CSS平移效果( 学习笔记 )

变形平移

---

变形：

• 变形就是通过CSS来改变元素的形状或位置
• 变形不会影响页面的布局
• transform 用来设置元素的变形效果

平移：

• translateX() 沿着X轴方向平移
• translateY() 沿着Y轴方向平移
• translateZ() 沿着Z轴方向平移

transform: translateX(50%); 	/*平移元素的百分比是相对于自身计算的*/
transform: translateX(100px); 

---

解决盒子( 宽高未确定 )居中的问题

/*这种居中方式，只适用于元素的大小确定*/
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;

解决方法：

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

---

Z轴平移

• 调整元素在Z轴的位置，正常情况下就是调整元素和人眼之间的距离（距离越大，元素离人越近）
• Z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果必须设置网页的视距

html{
	/*设置当前网页的视距为800px，人眼距离网页的距离*/
	perspective: 800px;
}

 /* Z轴平移效果 */
 .box{
     width: 200px;
     height: 200px;
     background-color: #bfa;
     margin: auto;
     transition: 1s;
 }
 .bigbox:hover .box{
     transform: translateZ(200px);
 }

---

实用例子（盒子浮起效果）：

/* 盒子浮起效果 */
.box10,.box11{
    float: left;
    width: 200px;
    height: 300px;
    margin: 0 20px;
    background: #fff;
    transition: all 0.3s;
}
.box10:hover,.box11:hover{
    transform: translateY(-5px);
    box-shadow: 0 0 10px rgb(0, 0, 0, .3);
}