-
位移:块级元素中子元素的垂直水平居中:
.father .son { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
注意:四个方位属性值为0,缺一不可。
- 旋转:transform: rotate(角度)角度单位:度(deg) /圈(turn) 360deg=1turn。
-
.box:hover { /* 正值旋转方向为顺时针;负值为逆时针 */ transform: rotate(-3000turn); /* 这里是逆时针三百千转 */ }
4.图片缩放案例分析
- 利用‘子绝父相’将缩放的小图片定位
- 先隐藏,再给box设置hover后选中img
-
.box .play { position: absolute; top: 17%; left: 50%; transform: translate(-50%) scale(3); width: 80px; height: 80px; /* 先隐藏起来,hover效果再显现 */ opacity: 0; transition: all 0.8s; } .box:hover .play { transform: translate(-50%) scale(1); opacity: 1; }
注意:谁过度,过度效果给谁加;前后transform位移属性值一致。配合opacity隐藏。
拓展:盒子加背景渐变色:常用伪元素给背景添加灰白渐变色效果
.box li:after {
position: absolute;
left: 0;
top: 0;
content: "";
width: 100%;
height: 100%;
background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
opacity: 0;
}
.box li:hover::after {
opacity: 1;
}