我正在尝试制作一个随屏幕尺寸缩放的响应式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)
}
非常感谢任何帮助。提前谢谢!
答案 0 :(得分: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;
}
}
一个小例子
答案 1 :(得分:0)
嗯,实际上你可以在任何地方使用视口宽度百分比,以便真正依赖宽度而且很容易。请参阅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
更符合您的需求)