1.transform的translate 和 rotate属性
有时候设置元素居中是通过translate实现的,而该元素的动画中又需要旋转,如果按照以下方式将发现元素开始旋转的位置不在中间:
.a { left: 50%;
position: absolute;
transform: translate(-50%);
&.animation { animation: ani 1s forword; }
}
@keyfram ani {
0% {transform: rotate(0deg);}
100% {transform: rotate(180deg);}
}
正确的动画设置应该为:
@keyfram ani {
0% {transform: translate(-50%) rotate(0deg);}
100% {transform: translate(-50%) rotate(180deg);}
}
也就是说在设置动画属性时需要把transform的两个属性都写上
2.绝对定位的子元素在部分iOS手机和Chrome上会被裁剪
做切换tab功能时,父元素相对定位,并设置了高度,子元素绝对定位也设置了高度,但是点击右侧的tab时整个导航被截断了
.nav{
position: relative;
width: 750px;
height: 87px;
z-index: 99;
}
.nav-left. .nav-right {
position: absolute;
width: 400px;
height: 87px;
}
