纯CSS实现可切换旋转的立体小盒子

周国辉发布于2019-08-01 14:50 / 1458人阅读

摘要：先把上了效果图原理用实现立体的盒子其实挺简单的，其核心就是的变换。但是因为本有个放大的效果，单层容器似乎做不到，所以用了两层。

好久没更新了，咳咳。
情况是这样的，周五在公司前端组开技术分享会，担心干货不够，所以周四晚上连夜写了这么一个Demo出来哗众取宠，实际上效果还是挺不错的，这次装了一手好逼，只不过当时组内的妹子们都没来，没能看到这盛大的场面，唉，简直遗憾至极。

先把Demo上了：http://output.jsbin.com/joqidi

效果图

原理

用CSS3实现立体的盒子其实挺简单的，其核心就是CSS3的transform变换。
更详细的介绍请移步张大大的文章：《CSS3 3D transform变换，不过如此！》

我在这边简单说下本Demo的原理：

1. 用一个DIV.cube-wrap做外部容器，并给其设置 -webkit-perspective相关属性;

.cube-wrap{
    position: relative;
    height: 100%;
    transition: .6s;
    -webkit-perspective: 2000;
    -webkit-perspective-origin: 50% 50%;
}

注：可以调整perspective和perspective-origin的值来看效果，一看即懂

2.再用一个DIV.cube做内部容器

.cube{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 300px;
    height: 100px;
    margin: auto;
    transition: .8s;
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50% -75px;
    -webkit-backface-visibility: visible;
}

其实一般的话只要一层容器就够了，直接把perspective设置在body上。但是因为本Demo有个放大的效果，单层容器似乎做不到~~，所以用了两层。

3.在内部容器放6个DIV来充当6个面，然后运用transform变换来让它们组成一个立体的小盒子

.cube-face{
    position: relative;
    background-color: #eb4c89;
    outline: 1px solid rgba(0,0,0,.1);
    outline-offset: -1px;
}
.cube-face-top{
    position: absolute;
    width: 300px;
    height: 150px;
    top: -150px;
    left: 0;
    -webkit-transform: rotateX(90deg);
    -webkit-transform-origin: 0 100%;
}
.cube-face-top:after,
.cube-face-bottom:after{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,.1);
}
.cube-face-left{
    position: absolute;
    top: 0;
    width: 150px;
    height: 100px;
    left: -150px;
    -webkit-transform: rotateY(-90deg);
    -webkit-transform-origin: 100% 0;
}

.cube-face-left:after,
.cube-face-right:after{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,.2);
}
.cube-face-front{
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 100px;
}
.cube-face-back{
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 100px;
    -webkit-transform: translateZ(-150px) rotateY(180deg);
}
.cube-face-right{
    position: absolute;
    top: 0;
    width: 150px;
    height: 100px;
    right: -150px;
    -webkit-transform: rotateY(90deg);
    -webkit-transform-origin: 0 0;
}
.cube-face-bottom{
    position: absolute;
    top: 100px;
    width: 300px;
    height: 150px;
    -webkit-transform: rotateX(-90deg);
    -webkit-transform-origin: 0 0;
}

里面的几个::after是为了在给其中几个面加上阴影，让效果更“真实”一点

5.现在的话一个立体的小盒子已经完成了，不过需要把内部容器.cube旋转一下，才能看到效果，我们用一排按钮来实现对.cube的transform:rotate的控制：

#show-front:checked ~ .cube-wrap .cube{
    -webkit-transform: rotateX(0) rotateY(0);
}
#show-back:checked ~ .cube-wrap .cube{
    -webkit-transform: rotateX(0) rotateY(180deg);
}
#show-left:checked ~ .cube-wrap .cube{
    -webkit-transform: rotateX(0) rotateY(90deg);
}
#show-right:checked ~ .cube-wrap .cube{
    -webkit-transform: rotateX(0) rotateY(-90deg);
}
#show-top:checked ~ .cube-wrap .cube{
    -webkit-transform: rotateX(-90deg) rotateY(0);
}
#show-bottom:checked ~ .cube-wrap .cube{
    -webkit-transform: rotateX(90deg) rotateY(0);
}

看吧，这里又用到了:checked和~的神奇组合。

完整的DOM结构如下




  
  Cube


    
    
    
    
    
    
    
    
        
            Front
            Back
            Top
            Left
            Right
            BOttom
        
    
    
        Front
        Back
        Top
        Bottom
        Left
        Right
        Zoom

完整的CSS代码如下

html,body{
    background-color: #eb4c89;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.cube-wrap{
    position: relative;
    height: 100%;
    transition: .6s;
    -webkit-perspective: 2000;
    -webkit-perspective-origin: 50% 50%;
}
#zoom-cube:checked ~ .cube-wrap{
    transform: scale(1.6);
}
.cube{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 300px;
    height: 100px;
    margin: auto;
    transition: .8s;
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50% -75px;
    -webkit-backface-visibility: visible;
}
#show-front:checked ~ .cube-wrap .cube{
    -webkit-transform: rotateX(0) rotateY(0);
}
#show-back:checked ~ .cube-wrap .cube{
    -webkit-transform: rotateX(0) rotateY(180deg);
}
#show-left:checked ~ .cube-wrap .cube{
    -webkit-transform: rotateX(0) rotateY(90deg);
}
#show-right:checked ~ .cube-wrap .cube{
    -webkit-transform: rotateX(0) rotateY(-90deg);
}
#show-top:checked ~ .cube-wrap .cube{
    -webkit-transform: rotateX(-90deg) rotateY(0);
}
#show-bottom:checked ~ .cube-wrap .cube{
    -webkit-transform: rotateX(90deg) rotateY(0);
}
.cube-face{
    position: relative;
    background-color: #eb4c89;
    outline: 1px solid rgba(0,0,0,.1);
    outline-offset: -1px;
}
.cube-face i{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 40px;
    margin: auto;
    color: #fff;
    font-size: 36px;
    text-align: center;
    line-height: 40px;
}
.cube-face-top{
    position: absolute;
    width: 300px;
    height: 150px;
    top: -150px;
    left: 0;
    -webkit-transform: rotateX(90deg);
    -webkit-transform-origin: 0 100%;
}
.cube-face-top:after,
.cube-face-bottom:after{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,.1);
}
.cube-face-left{
    position: absolute;
    top: 0;
    width: 150px;
    height: 100px;
    left: -150px;
    -webkit-transform: rotateY(-90deg);
    -webkit-transform-origin: 100% 0;
}
.cube-face-left:after,
.cube-face-right:after{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,.2);
}
.cube-face-front{
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 100px;
}
.cube-face-back{
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 100px;
    -webkit-transform: translateZ(-150px) rotateY(180deg);
}
.cube-face-right{
    position: absolute;
    top: 0;
    width: 150px;
    height: 100px;
    right: -150px;
    -webkit-transform: rotateY(90deg);
    -webkit-transform-origin: 0 0;
}
.cube-face-bottom{
    position: absolute;
    top: 100px;
    width: 300px;
    height: 150px;
    -webkit-transform: rotateX(-90deg);
    -webkit-transform-origin: 0 0;
}
input{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
.button-wrap{
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 840px;
    height: 50px;
    margin: 0 auto;
    font-size: 0;
    text-align: center;
}
.button-wrap label{
    display: inline-block;
    width: 120px;
    height: 50px;
    margin: 0;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    line-height: 52px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: .3s;
    background-color: rgba(255,255,255,.2);
    transform: translateY(50px);
}
.button-wrap:hover label{
    transform: translateY(0);
}
.button-wrap label:hover{
    background-color: rgba(255,255,255,.3);
}
#show-front:checked ~ .button-wrap .for-front,
#show-back:checked ~ .button-wrap .for-back,
#show-left:checked ~ .button-wrap .for-left,
#show-right:checked ~ .button-wrap .for-right,
#show-top:checked ~ .button-wrap .for-top,
#show-bottom:checked ~ .button-wrap .for-bottom,
#zoom-cube:checked ~ .button-wrap .for-zoom-cube{
    background-color: #fff;
    color: #eb4c89;
}

照旧只是演示，所以只加了-webkit-前缀。

好了，就这样了，各位周日愉快！

云服务器 GPU云服务器 div盒子的切换纯CSS 可旋转小盒子

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49613.html

不会做动画的程序猿不是好的动画师（如何用css3动画做动画）

摘要：一过渡一的作用二的属性二和动画一动画序列书写简例二书写简例常用属性简写属性三完整动画简例代码三转换一转换缩放移动旋转设置元素转换的中心点综合性写法二转换三维坐标系透视呈现位移旋转一过渡一的作用如果你有一个盒子，他的体内也有个小盒子。 ...

xeblog 2021-11-11 16:55 评论0 收藏0
Codepen 每周精选：不能错过的23个页面特效（2018-5-14）

摘要：按下右侧的点击预览按钮可以在当前页面预览，点击链接可以打开原始页面。按下右侧的点击预览按钮可以在当前页面预览，点击链接可以打开原始页面。 1. 像置身于龙卷风中的特效https://codepen.io/shubniggur... 2. 办公布局动画https://codepen.io/karlovidek... 3. 随着页面滚动而出现彩色色块https://codepen.io/...

godiscoder 2019-08-22 17:12 评论0 收藏0
Codepen 每周精选：不能错过的23个页面特效（2018-5-14）

摘要：按下右侧的点击预览按钮可以在当前页面预览，点击链接可以打开原始页面。按下右侧的点击预览按钮可以在当前页面预览，点击链接可以打开原始页面。 1. 像置身于龙卷风中的特效https://codepen.io/shubniggur... 2. 办公布局动画https://codepen.io/karlovidek... 3. 随着页面滚动而出现彩色色块https://codepen.io/...

孙吉亮 2019-08-29 15:23 评论0 收藏0
可拖拽的3D盒子

摘要：首先看下怎么做一个静止的盒子，用到了的。判断浏览器，谷歌滑轮事件当滑轮向上滚动时减小景深当滑轮向下滚动时增加景深滑轮事件好了，到这里这个盒子看起来已经很了，你可以直接在上复制代码查看效果，我多加了一个入场动画，喜欢可以顺手点个。一直想做一个立体的盒子，前段时间刚好看见掘金上有位朋友发了篇关于3d盒子的文章，看了决定自己做一下，再写一些和盒子互动的操作。这里是要做的效果，应该要翻过...

harryhappy 2019-08-20 19:06 评论0 收藏0