HTML+CSS小米商城logo2D转换效果

1、2D转换：
transform:translate(x,y);
transform:translateX(n);
transform:translateY(n);
定义2D转换中的移动，沿着x和y轴移动元素；不影响其他元素的位置，对行内标签没有效果。
2、伪元素选择器：
伪元素可以帮助我们利用css新建新标签元素，而不需要HTML标签，从而简化HTML结构。
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容
语法：element::before{
content:"";//content属性必须有的
}
伪元素选择器权重为1，属于行内元素。

html架构

<div class="xlogo">
        <a href="https://www.mi.com" class="logo"></a>
    </div>

css样式

.xlogo {
    width: 55px;
    height: 55px;

}
.xlogo .logo {
    position: relative;
    display: block;
    width: 55px;
    height: 55px;
    overflow: hidden;
    background-color: #ff6700;
    margin-left: 300px;
}
 .xlogo .logo:before {
    background: url(images/mi-logo.png) no-repeat 50% 50%;
}
.xlogo .logo:after, .xlogo .logo:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 55px;
    height: 55px;
    transition: all .2s;
}
.xlogo .logo:after {
    background: url(images/mi-home.png) no-repeat 50% 50%;
    /* 改变位置 */
    margin-left: -55px;
}
.xlogo .logo:hover:after,.xlogo .logo:hover:before {
    content: "";
    transform: translate(55px);
}

效果参考小米商城官网