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

好久没更新了，咳咳。
情况是这样的，周五在公司前端组开技术分享会，担心干货不够，所以周四晚上连夜写了这么一个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结构如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Cube</title>
</head>
<body>
    <input type="checkbox" id="zoom-cube">
    <input type="radio" name="cube-controller" id="show-front" checked>
    <input type="radio" name="cube-controller" id="show-back">
    <input type="radio" name="cube-controller" id="show-top">
    <input type="radio" name="cube-controller" id="show-bottom">
    <input type="radio" name="cube-controller" id="show-left">
    <input type="radio" name="cube-controller" id="show-right">
    <div class="cube-wrap">
        <div class="cube">
            <div class="cube-face cube-face-front"><i>Front</i></div>
            <div class="cube-face cube-face-back"><i>Back</i></div>
            <div class="cube-face cube-face-top"><i>Top</i></div>
            <div class="cube-face cube-face-left"><i>Left</i></div>
            <div class="cube-face cube-face-right"><i>Right</i></div>
            <div class="cube-face cube-face-bottom"><i>BOttom</i></div>
        </div>
    </div>
    <div class="button-wrap">
        <label class="for-front" for="show-front">Front</label>
        <label class="for-back" for="show-back">Back</label>
        <label class="for-top" for="show-top">Top</label>
        <label class="for-bottom" for="show-bottom">Bottom</label>
        <label class="for-left" for="show-left">Left</label>
        <label class="for-right" for="show-right">Right</label>
        <label class="for-zoom-cube" for="zoom-cube">Zoom</label>
    </div>
</body>
</html>

完整的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-前缀。

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

本文转载于:纯CSS实现可切换旋转的立体小盒子

原文地址：https://www.cnblogs.com/jlfw/p/12670508.html

时间： 2024-10-02 21:54:26

纯CSS实现可切换旋转的立体小盒子的相关文章

前端每日实战：2.纯 CSS 创作一个矩形旋转 loader 特效

原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR  扩展地址:https://codepen.io/pen/ HTML代码: <div class="loader"> <span></span> <span></span> <span></span> </div> CSS代码: /* 居中显示 */ htm

教你如何用纯CSS写Tab切换

说到Tab切换,你可能首先想到的就是使用jQuery,短短几行代码就可以轻松搞定一个Tab切换. 而今天所要分享的,是使用 0 行JS代码来实现Tab切换! 具体效果如下: Tab切换 方法一:模拟单选框原理 该方法大致原理如下: 当用户点击label元素时,该label所绑定的input单选框就会被选中,同时通过使用CSS选择器让被选中的input元素之后的label和.content元素都加上相应的样式. 具体如何实现呢?请耐心往下看... 1. HTML结构 <!--HTML--> &l

前端每日实战：127# 视频演示如何用纯 CSS 创作一个圆环旋转错觉动画

效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oPWJNj/ 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/p/pEgDAM/cbvPWHM 源代码下载 每日前端实战系列的全部源代码请从 github 下载: https://github.com/comehope/

如何用纯 CSS 创作一个变色旋转动画

效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ejZWKL 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/p/pEgDAM/cawq6cB 源代码下载 本地下载 每日前端实战系列的全部源代码请从 github 下载: https://github.com/

纯css3实现图片切换

1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>纯CSS实现图片切换</title> 6 <style> 7 *{margin:0; padding:0;} 8 li{ list-style:none;} 9 /*首先是对无序列表进行样式设置*/ 10 .slideshow ,.slideshow:after{

纯 CSS 利用 label + input 实现选项卡

clip 属性 用于剪裁绝对定位元素. .class { position:absolute; clip:rect(0px,60px,200px,0px); } scroll-behavior: smooth; 作用在容器元素上,可以让容器(非鼠标手势触发)的滚动变得平滑.利用这个css属性可以一步将原来纯css标签直接切换,变成平滑过渡切换效果. 代码: <!DOCTYPE html> <html lang="en"> <head> <met

利用target的特性，可以实现纯css的tab效果切换

基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1" class="tab">This is a tab1</div> :target{ color:red; } 但点击a标签的时候,连接到id是tab1的div,对这个div起作用color:red; 如: <a href="#tab"

纯CSS弹出层，城市切换效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>纯CSS弹出层效果</title> <meta http-equiv="Content-Type" content="text

纯CSS完成tab实现5种不同切换对应内容效果

很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <div class="main">                 <ul class="tabs">                     <li>