html +CSS 静态长方体绘制，不带旋转正方体绘制时把宽设置为250即可

最新推荐文章于 2022-12-31 20:18:24 发布

玲子的猫

最新推荐文章于 2022-12-31 20:18:24 发布

阅读量692

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/ypz131023/article/details/89185143

版权

前端专栏收录该内容

51 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>

html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}

body {
margin: 0;
}

figure {
margin: 0;
}

fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}

</style>

.separator {
margin-top: 40px;
}

.twitter {
color: #FFF;
text-decoration: none;
border-radius: 4px;
background: #00ACED;
display: inline-block;
padding: 10px 8px;
margin-bottom: 15px;
font-weight: bold;
}

/* 3D Cube */
.space3d {
perspective: 1000px;
width: 250px;
height: 150px;
text-align: center;
display: inline-block;
}

._3dbox {
display: inline-block;
transition: all 0.85s cubic-bezier(0.175, 0.885, 0.32, 1.275);
text-align: center;
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform: rotateX(-15deg) rotateY(15deg);
}

._3dface {

overflow: hidden;
position: absolute;
border: 1px solid #888;
background: #FFF;
box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.1), 0 0 50px rgba(0, 0, 0, 0.3);
color: #333;
line-height: 150px;
opacity: 0.8;
}

._3dface--front {
width: 250px;
height: 150px;
transform: translate3d(0, 0, 125px);
}

._3dface--top {
width: 250px;
height: 250px;
transform: rotateX(90deg) translate3d(0, 0, 125px);
}

._3dface--bottom {
width: 250px;
height: 250px;
transform: rotateX(-90deg) translate3d(0, 0, 26px);
}

._3dface--left {
width: 250px;
height: 150px;
left: 50%;
margin-left: -125px;
transform: rotateY(-90deg) translate3d(0, 0, 125px);
}

._3dface--right {
width: 250px;
height: 150px;
left: 50%;
margin-left: -125px;
transform: rotateY(90deg) translate3d(0, 0, 125px);
}

._3dface--back {
width: 250px;
height: 150px;
transform: rotateY(180deg) translate3d(0, 0, 125px);
}
._3dface--front {
background-color: #888888;
background-size: 100%;
}

._3dface--left {
background-color: #888888;
background-size: auto 100%;
}

._3dface--right {
background-color: #888888;
background-size: auto 100%;
}

._3dface--top {
background-color: #888888;
background-size: auto 100%;
}

._3dface--bottom {
background-color: #888888;
background-size: auto 100%;
}

._3dface--back {
background-color: #888888;
background-size: auto 100%;
}

.fontStyle{
font-size: 39px;
color: #FFFF;
}
</style>
</head>

<body>

</div>
<div class="space3d" style="float: right;">

</body>

</html>