本帖最后由 起个网名好难 于 2023-2-3 18:49 编辑 <br /><br /><style type="text/css">
#cube{
margin:100px auto;
width:250px; /*立方体面的宽*/
height:250px; /*立方体面的高*/
position:relative; /*相对定位*/
transform-style:preserve-3d; /* 默认flat 2D */
transform:rotateX(-15deg) rotateY(15deg);
}
#cube img{
width:100%;
height:100%;
position:absolute; /*绝对定位*/
opacity:.8; /*透明度*/
display:none;
border:thin blue solid;
}
@keyframes rotate{
0%{
transform:rotateX(0deg) rotateY(0deg);
}
100%{
transform:rotateX(360deg) rotateY(360deg);
}
}
#oblk {
width:800px;height:600px;
overflow:hidden;display:grid;place-items:center;
perspective: 3000px;
}
</style>
<div id="oblk">
<div id="cube">
<img src="https://s1.ax1x.com/2022/11/21/zQXlkD.jpg" />
<img src="https://s1.ax1x.com/2022/11/21/zQXMTO.jpg" />
<img src="https://s1.ax1x.com/2022/11/21/zQXK0K.jpg" />
<img src="https://s1.ax1x.com/2022/11/21/zQXum6.jpg" />
<img src="https://s1.ax1x.com/2022/11/21/zQXmOx.jpg" />
<img src="https://s1.ax1x.com/2022/11/21/zQXe61.jpg" />
</div></div>
<script type="text/javascript">
var cude = document.querySelector('#cube');
var imgs = cude.getElementsByTagName('img');
var aniObj = [];
var aIdx = 0;
for(n = 0; n < imgs.length; n++) {
if(n < 4) {
aniObj = imgs.animate([{transform:"rotateX(" + n*90 + "deg) translateZ(125px)"}], {duration:3000, fill:'forwards'});
}
else {
aniObj = imgs.animate([{transform:"rotateY(" + (n==4?90:-90) + "deg) translateZ(125px)"}], {duration:3000, fill:'forwards'});
}
aniObj.pause();
aniObj.onfinish = function() {
aIdx++;
if(aIdx < imgs.length) {
imgs.style.display = "block";
aniObj.play();
}
else {
cude.style.animation = "rotate 15s infinitelinear";console.log(cude.style.animationPlayState);
}
}
}
imgs.style.display = "block";
aniObj.play();
</script>
马黑黑 发表于 2023-2-3 17:39
压边面板之间的边界清晰一些
实践以后才明白的
马黑黑 发表于 2023-2-3 17:40
这个纯颜色的六面体也是漂亮，黑黑每天都有新的东东出来{:4_199:}
这样的深奥了。
庶民来了 发表于 2023-2-3 20:10
这样的深奥了。
能理解了就不深奥
小辣椒 发表于 2023-2-3 19:35
这个纯颜色的六面体也是漂亮，黑黑每天都有新的东东出来
不是每天，每一个时期
起个网名好难 发表于 2023-2-3 18:47
本帖最后由 起个网名好难 于 2023-2-3 18:49 编辑
#cube{
margin:100px auto;
出色
小辣椒 发表于 2023-2-3 19:34
实践以后才明白的
是的，实践太重要了
马黑黑 发表于 2023-2-3 17:34
屋里有暖气
提前折腾它们干嘛{:4_173:}
马黑黑 发表于 2023-2-3 17:37
演示需要可以，一般不会去改变视点
哦哦，会引起混乱？
马黑黑 发表于 2023-2-3 17:38
不容易
讲得这么清楚，再不明白，冬眠的那些就完了{:4_173:}
红影 发表于 2023-2-3 22:28
讲得这么清楚，再不明白，冬眠的那些就完了
{:4_196:}
红影 发表于 2023-2-3 22:27
哦哦，会引起混乱？
这是一种习惯，比如看电影，坐着看，相对不动
红影 发表于 2023-2-3 22:26
提前折腾它们干嘛
把问题讲明白
马黑黑 发表于 2023-2-3 22:31
这是一种习惯，比如看电影，坐着看，相对不动
原来是这样，我还以为会把人晃晕呢{:4_173:}
马黑黑 发表于 2023-2-3 22:31
把问题讲明白
癞蛤蟆招你惹你了{:4_189:}
红影 发表于 2023-2-3 23:48
癞蛤蟆招你惹你了
癞蛤蟆可是公子哥
红影 发表于 2023-2-3 23:47
原来是这样，我还以为会把人晃晕呢
那也会
马黑黑 发表于 2023-2-4 08:42
癞蛤蟆可是公子哥
为什么这么说？就是因为它想吃天鹅肉？{:4_173:}
马黑黑 发表于 2023-2-4 08:43
那也会
人们还是习惯于参照系是不动的。