使用纯CSS制作展开合并立方体特效

显示效果
这里写图片描述
源码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css动画练习</title>
</head>
<style>
body {
    background: #999;
    margin: 0 auto;
    font-size: 100px;
    height: 100%;
}

div {
    margin: 0 auto;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100px;
    height: 100px;
}

div.a {
    background: red;
    transition: width 2s, height 2s, transform 2s;
}

div.b {
    background: yellow;
    transition: width 2s, height 2s, transform 2s;
}

div.c {
    background: blue;
    transition: width 2s, height 2s, transform 2s;
}

div.d {
    background: pink;
    transition: width 2s, height 2s, transform 2s;
}

div.e {
    background: white;
    transition: width 2s, height 2s, transform 2s;
}

div.f {
    background: purple;
    transition: width 2s, height 2s, transform 2s;
}

body:hover div.a {
    width: 200px;
    height: 200px;
    transform: rotatex(260deg) rotate(90deg) translate(1100px, 0);
}

body:hover div.b {
    width: 200px;
    height: 200px;
    transform: rotatex(-180deg) rotate(90deg) translate(300px, 0);
}

body:hover div.c {
    width: 200px;
    height: 200px;
    transform: rotatey(-80deg) rotate(-90deg) translate(300px, -600px);
}

body:hover div.d {
    width: 200px;
    height: 200px;
    transform: rotatey(80deg) rotate(90deg) translate(-300px, -600px);
}

body:hover div.e {
    width: 200px;
    height: 200px;
    transform: rotatex(80deg) rotate(90deg) translate(-2300px, 0);
}

body:hover div.f {
    width: 200px;
    height: 200px;
    transform: rotatex(360deg) rotate(90deg) translate(-300px, 0);
}
</style>
<body >
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="c">C</div>
    <div class="d">D</div>
    <div class="e">E</div>
    <div class="f">F</div>
</body>