【Web前端HTML5&CSS3】平移、旋转与缩放

变形：平移、旋转与缩放

1、平移
浮出效果
2、Z轴平移
透视效果
3、旋转
4、缩放
5、实战
鸭子表
复仇者联盟
1、几种水平垂直双方向居中的方式对比

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

2、table-cell的方式

/* table-cell的方式具有一定局限性 */
display: table-cell;
vertical-align: middle;
text-align: center;

3、transform的方式

/* transform变形平移的方式 */
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);

浮出效果

div {
    float: left;
    width: 200px;
    height: 300px;
    background-color: silver;
    margin: 100px 50px auto 50px;
    transition: all .3s;
}

div:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    transform: translateY(-5px);
}