新颖写法 纯HTML CSS制作3D魔方

不依靠JS 你能做出怎样的效果

话不多说 下面肚财康就直接上才艺了
为了博友们容易看 我就直接上JS模板图 但这不是JS
以下为css

*{
    margin:0;
    padding:0;
    user-select: none;
}
body{
    text-align: center;
    padding-top:5%;
    background: url(img/bg.jpg);
    font-weight: bold;
}
input{
    display: none;
}
label{
    display: inline-block;
    width:80px;
    height:40px;
    line-height:40px;
    text-align: center;
    border:2px solid #6c6c6c;
    margin:0 3px;
    border-radius: 8px;
    cursor: pointer;
    transition:all ease-in-out .6s;
    color: #ffff33;
}
label:hover{
    background:rgb(72,209,204);
    color:#fff;
    border:1px solid transparent;
}
.clear{
    padding-bottom:10%;
}
.views{
    width:250px;
    height:250px;
    text-align:center;
    margin:0 auto;

    /* 设置3D空间距离 */
    perspective: 1000px;
}
.box{
    position: relative;
    text-align:center;
    width:100%;
    height:100%;
    display: inline-block;

    /* 设置为3d元素 */
    transform-style: preserve-3d;

    /* 让元素先显示出来正面 */
    transform:rotateX(-15deg) rotateY(20deg);

    transition: all ease-in-out .5s;
}
.face{
    width:100%;
    height:100%;
    line-height:250px;
    font-size:3em;
    text-align:center;
    position: absolute;
    left:0;
    top:0;
    border:1px solid #000;
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.1), 0 0 50px rgba(0, 0, 0, 0.3);

    transition: all ease-in .5s;
}
.front{
	background: url(img/01.png);
    transform:translate3d(0,0,125px);
}

.back{
	background: url(img/02.png);
    transform:rotateY(180deg) translate3d(0,0,125px);
}

.left{
	background: url(img/03.png);
    transform:rotateY(-90deg) translate3d(0,0,125px);
}

.right{
	background: url(img/04.png);
    transform:rotateY(90deg) translate3d(0,0,125px);
}

.top{
	background: url(img/05.png);
    transform:rotateX(90deg) translate3d(0,0,125px);
}

.bottom{
	background: url(img/06.png);
    transform:rotateX(-90deg) translate3d(0,0,125px);
}
#front:checked ~ .views .box{
    transform:rotateX(-15deg) rotateY(20deg);
}


#back:checked ~ .views .box{
    transform:rotateX(-15deg) rotateY(205deg);
}


#left:checked ~ .views .box{
    transform:rotateX(-15deg) rotateY(105deg);
}

#right:checked ~ .views .box{
    transform:rotateX(-15deg) rotateY(-105deg);
}

#top:checked ~ .views .box{
    transform:rotateY(20deg) rotateX(-90deg);
}

#bottom:checked ~ .views .box{
    transform:rotateY(20deg) rotateX(90deg);
}

#big:checked ~ .views .box{
    transform:scale(2) rotateX(-15deg) rotateY(20deg);
}

#small:checked ~ .views .box{
    transform:scale(0.5) rotateX(-15deg) rotateY(20deg);
}

先看看效果
感觉还不够完善 我突发奇想 能不能让这6面直接分离 于是就有了

.box:hover .front{
    transform:translate3d(0,0,350px);
}
.box:hover .back{
    transform:rotateY(180deg) translate3d(0,0,350px);
}
.box:hover .left{
    transform:rotateY(-90deg) translate3d(0,0,350px);
}
.box:hover .right{
    transform:rotateY(90deg) translate3d(0,0,350px);
}
.box:hover .top{
    transform:rotateX(90deg) translate3d(0,0,350px);
}
.box:hover .bottom{
    transform:rotateX(-90deg) translate3d(0,0,350px);
}

下面看看最终效果图

觉得肚财康做的还行的请点点关注不迷路 UP主带你上高速！