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

最新推荐文章于 2022-08-30 07:56:21 发布

weixin_33699914

最新推荐文章于 2022-08-30 07:56:21 发布

阅读量133

点赞数

原文链接：http://www.cnblogs.com/YooHoeh/p/9095398.html

版权

显示效果
这里写图片描述

源码

<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>

转载于:https://www.cnblogs.com/YooHoeh/p/9095398.html

weixin_33699914

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用纯CSS制作展开合并立方体特效

显示效果源码<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>css动画练习</title></head><style>body {...
复制链接

扫一扫