Html 用纯CSS绘制三维立方体
我想把这个立方体,见下面的代码,转换成你能在图片上看到的这个立方体,但我不明白 实际结果: CSSHtml 用纯CSS绘制三维立方体,html,css,Html,Css,我想把这个立方体,见下面的代码,转换成你能在图片上看到的这个立方体,但我不明白 实际结果: CSS .立方体包裹{ -webkit透视图:800px; -webkit透视图来源:50%100px; -moz透视图:800px; -moz透视原点:50%100px; -ms透视图:800px; -ms透视原点:50%100px; 透视图:800px; 透视原点:50%100px; } .立方体{ 位置:相对位置; 宽度:200px; 保证金:0自动; -webkit变换样式:保留-3d; -w
.立方体包裹{
-webkit透视图:800px;
-webkit透视图来源:50%100px;
-moz透视图:800px;
-moz透视原点:50%100px;
-ms透视图:800px;
-ms透视原点:50%100px;
透视图:800px;
透视原点:50%100px;
}
.立方体{
位置:相对位置;
宽度:200px;
保证金:0自动;
-webkit变换样式:保留-3d;
-webkit动画:旋转5s无限线性;
-moz变换样式:preserve-3d;
-moz动画:旋转5s无限线性;
-ms变换样式:preserve-3d;
-ms动画:旋转5s无限线性;
变换样式:保留-3d;
动画:旋转5s无限线性;
}
.cube div{
位置:绝对位置;
宽度:200px;
高度:100px;
背景:rgba(255,255,255,0.1);
盒影:插入0 0 30px rgba(125、125、125、0.8);
字体大小:20px;
文本对齐:居中;
线高:100px;
颜色:rgba(0,0,0,0.5);
字体系列:无衬线;
文本转换:大写;
}
.深度分区后窗格{
-webkit变换:translateZ(-100px)旋转(180度);
-莫兹变换:translateZ(-100px)rotateY(180度);
-ms变换:translateZ(-100px)旋转(180度);
变换:translateZ(-100px)旋转(180度);
}
.深度分区右窗格{
-webkit变换:旋转(-270度)translateX(100像素);
-webkit变换原点:右上角;
-莫兹变换:旋转(-270度)平移(100px);
-moz变换原点:右上角;
-ms变换:旋转(-270度)translateX(100像素);
-ms变换原点:右上角;
变换:旋转(-270度)translateX(100像素);
变换原点:右上角;
}
.深度分区左窗格{
-webkit变换:旋转(270度)translateX(-100px);
-webkit变换原点:左中;
-moz变换:旋转(270度)translateX(-100px);
-moz变换原点:左中;
-ms变换:旋转(270度)translateX(-100px);
-ms变换原点:左中;
变换:旋转(270度)translateX(-100px);
变换原点:左中;
}
.深度分区顶部窗格{
-webkit转换:rotateX(-90度)translateY(-100像素);
-webkit变换原点:顶部中心;
-moz变换:rotateX(-90度)translateY(-100像素);
-moz变换原点:顶部中心;
-ms变换:rotateX(-90度)translateY(-100像素);
-ms变换原点:顶部中心;
变换:rotateX(-90度)translateY(-100px);
变换原点:顶部中心;
}
.深度分区底部窗格{
-webkit变换:旋转(90度)平移(100像素);
-webkit变换原点:底部中心;
-莫兹变换:旋转(90度)平移(100像素);
-moz变换原点:底部中心;
-ms变换:rotateX(90度)translateY(100像素);
-ms变换原点:底部中心;
变换:旋转(90度)平移(100像素);
变换原点:底部中心;
}
.深度分区前窗格{
-webkit转换:translateZ(100px);
-moz变换:translateZ(100px);
-ms变换:translateZ(100px);
变换:translateZ(100px);
}
HTML
演示小提琴:
预期产出:
这应该会有帮助,您需要稍微调整一下这些值:
当然你需要所有的浏览器前缀,我使用chrome,所以我添加了-webkit-创建一个fiddle pls(jsfiddle.net)谢谢你重新设计我的问题!你可以找到一个教程,你可以使用javascript来旋转一个立方体,你有没有尝试过搜索如何做呢?我不需要旋转,它应该看起来像图像。它看起来像一个盒子,我们可以把东西放进去。。。
<style type="text/css">
.cube-wrap {
-webkit-perspective: 800px;
-webkit-perspective-origin: 50% 100px;
-moz-perspective: 800px;
-moz-perspective-origin: 50% 100px;
-ms-perspective: 800px;
-ms-perspective-origin: 50% 100px;
perspective: 800px;
perspective-origin: 50% 100px;
}
.cube {
position: relative;
width: 200px;
margin: 0 auto;
-webkit-transform-style: preserve-3d;
-webkit-animation: spin 5s infinite linear;
-moz-transform-style: preserve-3d;
-moz-animation: spin 5s infinite linear;
-ms-transform-style: preserve-3d;
-ms-animation: spin 5s infinite linear;
transform-style: preserve-3d;
animation: spin 5s infinite linear;
}
.cube div {
position: absolute;
width: 200px;
height: 100px;
background: rgba(255, 255, 255, 0.1);
box-shadow: inset 0 0 30px rgba(125, 125, 125, 0.8);
font-size: 20px;
text-align: center;
line-height: 100px;
color: rgba(0, 0, 0, 0.5);
font-family: sans-serif;
text-transform: uppercase;
}
.depth div.back-pane {
-webkit-transform: translateZ(-100px) rotateY(180deg);
-moz-transform: translateZ(-100px) rotateY(180deg);
-ms-transform: translateZ(-100px) rotateY(180deg);
transform: translateZ(-100px) rotateY(180deg);
}
.depth div.right-pane {
-webkit-transform: rotateY(-270deg) translateX(100px);
-webkit-transform-origin: top right;
-moz-transform: rotateY(-270deg) translateX(100px);
-moz-transform-origin: top right;
-ms-transform: rotateY(-270deg) translateX(100px);
-ms-transform-origin: top right;
transform: rotateY(-270deg) translateX(100px);
transform-origin: top right;
}
.depth div.left-pane {
-webkit-transform: rotateY(270deg) translateX(-100px);
-webkit-transform-origin: center left;
-moz-transform: rotateY(270deg) translateX(-100px);
-moz-transform-origin: center left;
-ms-transform: rotateY(270deg) translateX(-100px);
-ms-transform-origin: center left;
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.depth div.top-pane {
-webkit-transform: rotateX(-90deg) translateY(-100px);
-webkit-transform-origin: top center;
-moz-transform: rotateX(-90deg) translateY(-100px);
-moz-transform-origin: top center;
-ms-transform: rotateX(-90deg) translateY(-100px);
-ms-transform-origin: top center;
transform: rotateX(-90deg) translateY(-100px);
transform-origin: top center;
}
.depth div.bottom-pane {
-webkit-transform: rotateX(90deg) translateY(100px);
-webkit-transform-origin: bottom center;
-moz-transform: rotateX(90deg) translateY(100px);
-moz-transform-origin: bottom center;
-ms-transform: rotateX(90deg) translateY(100px);
-ms-transform-origin: bottom center;
transform: rotateX(90deg) translateY(100px);
transform-origin: bottom center;
}
.depth div.front-pane {
-webkit-transform: translateZ(100px);
-moz-transform: translateZ(100px);
-ms-transform: translateZ(100px);
transform: translateZ(100px);
}
</style>
<div id="page">
<div id="contentHolder">
<div style="height: 100px; margin-top: 40px;">
<div class="cube-wrap">
<div class="cube depth">
<div class="front-pane"></div>
<div class="back-pane"></div>
<div class="top-pane"></div>
<div class="bottom-pane"></div>
<div class="left-pane"></div>
<div class="right-pane"></div>
</div>
</div>
</div>
</div>
</div>
.cube.depth {
-webkit-transform: rotateY(45deg);
}
.cube-wrap {
-webkit-perspective: 8000px;
-webkit-perspective-origin: 20% 2000px;
}