嗨，我在移动设备上使 3d 轮播响应时遇到问题，我尝试使用 Hi bootstrap 添加 img-fluid 类，但它弄乱了我的网页视图，这里是代码
嗨，我需要一些帮助，使 3d 轮播在移动设备上响应，我尝试了一切，但似乎不起作用，我尝试了 bootstrap img-fluid 类，但它弄乱了网页视图，任何想法或建议都非常感谢你。 下面是html中的css代码
<style>
div#carousel {
perspective: 1200px;
background: black;
padding-top: 10%;
font-size:0;
margin-bottom: 3rem;
overflow: hidden;
}
figure#spinner {
transform-style: preserve-3d;
height: 300px;
transform-origin: 50% 50% -500px;
transition: 1s;
}
figure#spinner img {
width: 40%; max-width: 425px;
position: absolute; left: 30%;
transform-origin: 50% 50% -500px;
outline:1px solid transparent;
}
figure#spinner img:nth-child(1) { transform:rotateY(0deg);
}
figure#spinner img:nth-child(2) { transform: rotateY(-45deg); }
figure#spinner img:nth-child(3) { transform: rotateY(-90deg); }
figure#spinner img:nth-child(4) { transform: rotateY(-135deg); }
figure#spinner img:nth-child(5){ transform: rotateY(-180deg); }
figure#spinner img:nth-child(6){ transform: rotateY(-225deg); }
figure#spinner img:nth-child(7){ transform: rotateY(-270deg); }
figure#spinner img:nth-child(8){ transform: rotateY(-315deg); }
div#carousel ~ span {
color: #fff;
margin: 5%;
display: inline-block;
text-decoration: none;
font-size: 2rem;
transition: 0.6s color;
position: relative;
margin-top: -6rem;
border-bottom: none;
line-height: 0; }
div#carousel ~ span:hover { color: #888; cursor: pointer; }
</style
<body>
<base href="awesome1.gif">
<div id="carousel">
<figure id="spinner">
<img src="bull1.gif" alt>
<img src="awesome1.gif" alt>
<img src="building.gif" alt>
<img src="peace.gif" alt>
<img src="awesome1.gif" alt>
<img src="mother1.gif" alt>
<img src="starry1.gif" alt>
<img src="picture1.jpg" alt>
</figure>
</div>
<span style="float:left" class="ss-icon" onclick="galleryspin('-')"><</span>
<span style="float:right" class="ss-icon" onclick="galleryspin('')">></span>
</body>
</html>
and below is JS code
var angle = 0;
function galleryspin(sign) {
spinner = document.querySelector("#spinner");
if (!sign) { angle = angle + 45; } else { angle = angle - 45; }
spinner.setAttribute("style","-webkit-transform: rotateY("+ angle +"deg); -moz-transform:
rotateY("+ angle +"deg); transform: rotateY("+ angle +"deg);");
}
tried adding bootstrap class img-fluid but it messes the web view I read online that i can make a mobile view website by adding some code is that true, can i make responsive just by that or do i need a bootstrap
thank you so much.
你的意思是这个吗？：示例
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
from {transform: rotateY(0deg)}
to {transform: rotateY(360deg)}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<div></div>
</body>
</html>