Question

我正在尝试制作一个随屏幕尺寸缩放的响应式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

Answer 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;
        }
    }

一个小例子

Answer 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上的more info，vh和vmin（可能vmin更符合您的需求）

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

2 个答案: