Html Css定位/响应设计在类似小部件的设计中

我现在有一个小部件，它将成为我的“坦克小部件视图”的一部分。我希望我的设计风格/格式类似于：

+------------------------------------------+
| HEADER                                 X |
+------------------------------------------+
|  ______________________________________  |
| <______________________________________> |
|  |                % full              |  |
|  |                                    |  |
|  |WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW|  |  <-- tank fills its container, should be centered  
|  |       O         o       O          |  |      hoz. shouldn't overflow box
|  ___________o_____________________O____  |
| <______________________________________> |
|                                          |
|  +------------------------------------+  |
|  |                                    |  |
|  |             TABULAR DATA           |  |
|  |                here                |  |  <-- table has 100% width (working)
|  |                                    |  |
|  +------------------------------------+  |
+------------------------------------------+
| FOOTER                                   |
+------------------------------------------+

坦克1:Kero
50%满




























卷：
50L
容量：
100升
损耗（AL）：
1.24

首先，通过对元素应用变换来隐式（绝对）定位。因此，由于容器和框架元素没有设置的高度，因此需要添加额外的换行符来定位表格

由于小部件具有固定的高度，因此可以在该表上设置绝对位置：

#specTab1 {
    position: absolute;
    bottom: 50px; // to leave space for the 40px footer
}

接下来就是坦克本身。小部件的宽度设置为相对宽度（40%），但单个条带的translateZ和宽度值是固定的

.strip div {
    ...
    width:34px;
    ...
}
.strip .a {
    ...
    transform: rotateY(0deg) translateZ(124px);
    ...
}

当然，这两个值对于实际渲染圆柱体对象很重要，但由于固定值，这不太适合。主要问题是缺少z轴参考，它不允许您使用相对单位，

translateX（100%）

甚至

translateY（calc（50%+15px））

工作正常，但

translateZ（）的情况并非如此

长话短说，imho纯CSS目前不允许您以响应方式渲染坦克。您很可能需要javascript来获取小部件的实际宽度（以绝对数表示）并计算每个条带的值。这可以用这样的函数来完成（这只设置WebKittTransform，您还需要对其他前缀执行此操作）：

函数resize3d（）{
var container=document.getElementById（'container'）；
w=容器偏移网络宽度/10；
z=容器偏移网络宽度/30*11；
var梯度=0；
var alphabet=“abcdefghijklmnopqrstuvxx”；
对于（var i=0；i（仅为webkit编写）并调整窗口大小。我还调整了相当多的变换值，以使坦克在旋转动画中或多或少居中（尝试悬停坦克！；）或获得它）.
你是说这个吗？@user3801433当宽度变小时，你的演示会显示编辑过的图像。我需要“适应小部件宽度”（将宽度缩小到大小）（它也会使水槽变得太大）。单靠css和html是做不到的。我想你需要JS或JQUERY。我大约80%肯定纯css可以做到这一点，但是我的脑袋有点发火了，我想不出来（目前）如何。好的jbutler483，我稍后再告诉你，因为我有点忙。我希望有人能在我之前帮助你。谢谢你的赞美，但这只是一个草稿。当屏幕太窄时会有问题。你可能需要调整计算。但我想，你对我所做的事情有了大致的了解。；）这比我知道的要远得多（正如你所说：P）我已经测试过了，它（希望）能小到我需要的最小屏幕。谢谢你！）
    function resize3d() {
        var container = document.getElementById('container');
        w = container.offsetWidth / 10;
        z = container.offsetWidth / 30 * 11;
        var grad = 0;
        var alphabet = "abcdefghijklmnopqrstuvwx";
        for(var i=0; i<alphabet.length; i++)
        {
            var letter = alphabet.charAt(i);
            var el = document.querySelector(".strip ."+letter);
            el.style.width = w+"px";
            el.style.webkitTransform = "rotateY("+grad+"deg) translateZ("+z+"px)";
            grad += 15;
        }
    }