其他分享
首页 > 其他分享> > 旋转魔方(1)-外壳

旋转魔方(1)-外壳

作者：互联网

实现结果如图：

 

 

 HTML：

<!DOCTYPE html>
<html>
<head>
    <title>魔方</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <div class="box">
            <div class="box-page top"></div>
            <div class="box-page bottom"></div>
            <div class="box-page left"></div>
            <div class="box-page right"></div>
            <div class="box-page after"></div>
            <div class="box-page before"></div>
        </div>
    </div>
</body>
</html>

CSS：

 

*{
    padding: 0px;
    margin: 0px;
}

body{
color:#ccc;
}

.container{
    width: 300px;
    height: 300px;
    margin: 150px auto;
}

/*整体*/
.box{
    width: 300px;
    height: 300px;
    /*子元素保留其3D位置*/
    transform-style:preserve-3d;
    transform:rotateX(-60deg) rotateZ(40deg);
}

/*全部页*/
.box_page{
    width: 300px;
    height: 300px;
    background-color: red;
    position: absolute;
}

/*各页*/
.top{
    background-color: red;
    transform: translateY(-150px) rotateX(90deg);
}
.bottom{
    background-color: yellow;
    transform: translateY(150px) rotateX(90deg);

}
.left{
    background-color: blue;
    transform: translateX(-150px) rotateY(90deg);
}
.right{
    background-color: pink;
    transform: translateX(150px) rotateY(90deg);
}
.after{
    background-color: black;
    transform: translateZ(-150px);
}
.before{
    background-color: green;
    transform: translateZ(150px);
}

 

translate方向：x正为水平向右，y正垂直向下，z正向电脑前的你

rotate方向：x水平向右 朝上旋转，y垂直向上 朝右旋转，z正看着的屏幕顺时针

 

标签：魔方,color,90deg,transform,300px,旋转,外壳,background,150px
来源： https://www.cnblogs.com/first-bloodlalala/p/12436973.html