如何让我的 CSS-3D 立方体响应？答案

【问题标题】：How do I make my CSS-3D cube responsive?如何让我的 CSS-3D 立方体响应？
【发布时间】：2018-01-12 23:23:34
【问题描述】：

我正在尝试制作一个随屏幕尺寸缩放的响应式 3D 动画立方体，但每当我尝试将像素值更改为百分比值时，它就会中断。我将如何使这个立方体具有功能性和响应性？这是我的代码：

@-webkit-keyframes spin-anim {
from {
    -webkit-transform: rotateY(0);
}
to {
    -webkit-transform: rotateY(360deg);
}
}
@keyframes spin-anim {
from {
    transform: rotateY(0);
}
to {
    transform: rotateY(360deg);
}
}
.cube {
-webkit-animation: spin-anim 20s infinite linear;
animation: spin-anim 20s infinite linear;
 transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.canvas {
width:400px;
height:400px;
-webkit-perspective: 500px;
perspective: 500px;
margin:auto;

}
.face {
background-color:blue;
width:400px;
height:400px;
position:absolute;
border:1px solid black;
}
.front {
transform: translateZ(200px);
-webkit-transform:translateZ(200px);
background-image: url(../assets/logo.jpg);
}
.back {
transform: rotateX(180deg) translateZ(200px);
-webkit-transform:rotateX(180deg) translateZ(200px);
background-image: url(http://fillmurray.com/500/500)
}
.top {
transform: rotateX(90deg) translateZ(200px);
-webkit-transform:rotateX(90deg) translateZ(200px);
background-image: url(http://fillmurray.com/500/500)
}
.bottom {
transform: rotateX(-90deg) translateZ(200px);
-webkit-transform:rotateX(-90deg) translateZ(200px);
background-image: url(http://fillmurray.com/500/500)
}
.left {
transform: rotateY(-90deg) translateZ(200px);
-webkit-transform:rotateY(-90deg) translateZ(200px);
background-image: url(http://fillmurray.com/500/500)
}
.right {
transform: rotateY(90deg) translateZ(200px);
-webkit-transform:rotateY(90deg) translateZ(200px);
background-image: url(http://fillmurray.com/500/500)
}

任何帮助将不胜感激。提前谢谢！

Fiddle

【问题讨论】：

HTML 是...？您还可以在此处或例如在此处创建代码 sn-p jsfiddle
html 非常简单。 <div class="item3"> <div class="canvas"> <div class="cube"> <div class="front face"></div> <div class="back face"></div> <div class="top face"></div> <div class="bottom face"></div> <div class="left face"></div> <div class="right face"></div> </div> </div> </div>
您提供的 HTML 无法按原样与您的 css 一起使用。总的来说，它不是那样工作的。如果您不尝试从回答者的角度看待您的问题，那么没有人会帮助您。我帮不了你，因为你太懒了，不会制作小提琴
我对这一切还是陌生的，我从来没有真正创造过小提琴，所以说实话我不知道怎么做，不是我懒惰。
jsfiddle.net/n306asn3 这是小提琴。

标签： css responsive-design css-grid

【解决方案1】：

查看@media 屏幕

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

基本思想是，无论屏幕分辨率（像素）如何，设备的屏幕都会显示该屏幕尺寸的 css 代码

    @media screen and (max-width: 1200px){
        .cube{
            width: 400px;
            height: 400px;
        }
    }

    @media screen and (max-width: 600px){
        .cube{
            width: 200px;
            height: 200px;
        }
    }

一个小例子

【讨论】：

我尝试过，虽然有变化，但它并没有完全正确地重新调整。它似乎向左偏移，只会变小一点，实际上并没有达到我指定的大小。我做错了吗？
对于不同的屏幕尺寸，您可能需要更改的不仅仅是宽度和高度。

【解决方案2】：

实际上，您可以在任何地方使用视口宽度百分比，以便真正轻松地仅依赖于宽度。见fiddle

@keyframes spin-anim {
    from {
        transform: rotateY(0);
    }
    to {
        transform: rotateY(360deg);
    }
}
.cube {
    animation: spin-anim 20s infinite linear;
    transform-style: preserve-3d;
}
.canvas {
    width:50vw;
    height:50vw;
    perspective: 200vw;
    margin: 50px auto;
}
.face {
    background-image: url(http://fillmurray.com/500/500);
    width:50vw;
    height:50vw;
    position:absolute;
}
.front {
    transform: translateZ(25vw);
}
.back {
    transform: rotateX(180deg) translateZ(25vw);
}
.top {
    transform: rotateX(90deg) translateZ(25vw);
}
.bottom {
    transform: rotateX(-90deg) translateZ(25vw);
}
.left {
    transform: rotateY(-90deg) translateZ(25vw);
}
.right {
    transform: rotateY(90deg) translateZ(25vw);
}

现在每个立方体的边都是浏览器窗口宽度的 50% 高度/宽度。

参见vw、vh 和vmin 上的more info（可能vmin 更适合您的需求）

【讨论】：