CSS中的直接线性变换

Question

是否可以在CSS中执行DLT？如果是这样，这是如何实现的？我想不出只使用transform: matrix的方式...如果这不可行，那会有什么替代方法呢？

我想要实现的特殊效果是以类似于Safari的方式布局div：

Answer 1

这是对您的请求的非常粗略和非通用的答案。 http://jsfiddle.net/3t5SM/ 您可以轻松扩展它以获得通用更好的解决方案。

在我的CSS中，

#id1, #id4, #id7{        
 -webkit-transform: rotateY(40deg);
}
#id3, #id6, #id9{        
 -webkit-transform: rotateY(-40deg);
}
#id2, #id5, #id8{        
 -webkit-transform: scale(0.94);
}

基本思想是为每一列创建一个样式（这里我调用了id，但同样，最好为每个列创建一个样式并将列定义为.left，{{1 }，.middle等）

如果我有时间详细说明，我今晚会更新我的帖子：）

---

编辑：作为承诺，这是一个更好的版本。现在它更加通用，根据窗口的大小，您将获得正确数量的多维数据集。它仍然远非完美（你可以玩立方体的大小，以获得更好的深度感），但总的来说，你看到它是可能的，甚至动态:) 这是小提琴：http://jsfiddle.net/P84qd/4/

稍微了解一下javascript的详细信息：

.right

function dispatch(){ var sizeOfImg = 150; var windowWith = document.body.offsetWidth; var widthRest = windowWith%sizeOfImg; var nbSquareRow = Math.floor(windowWith/sizeOfImg); dlt(nbSquareRow); var marginVal = widthRest/(nbSquareRow+1); var lineout = document.getElementById('lineout'); lineout.style.paddingLeft = marginVal+'px'; lineout.style.paddingTop = marginVal+'px'; var square = document.getElementsByTagName('div'); for(var i=0, length = square.length;i<length; i++){ if(square[i].className === 'square'){ square[i].style.marginRight = marginVal+'px'; square[i].style.marginBottom = marginVal+'px'; } } } dispatch(); window.onresize = function(e){dispatch();}; function dlt(nbSquareRow){ var maxRotatDeg = 40; var isEven=true; if(nbSquareRow%2 == 0){ var unityRotatDeg = maxRotatDeg/(nbSquareRow/2); }else{ var unityRotatDeg = maxRotatDeg/((nbSquareRow-1)/2); isEven = false; } var middle = Math.floor(nbSquareRow/2); var mySquares = document.getElementsByTagName('div'); for(var j=0, sqleng = mySquares.length;j<sqleng; j++){ if(mySquares[j].className == 'square'){ var colNumb = (parseInt(mySquares[j].id)-1)%nbSquareRow; var myMultiplier = (middle-colNumb); if(isEven && myMultiplier<=0){ myMultiplier--; } mySquares[j].style.webkitTransform = 'rotateY('+(unityRotatDeg*myMultiplier)+'deg)'; } } } 功能是一个简单的功能，可以在网页上分配相等边距（上，左，右，下）的方块。我从1拿走了它。 dispatch函数计算列数并定义每列的旋转量（在我的示例中，最大旋转值为40）。其余的代码纯粹是一些数学检查，以使其正常工作。

为了获得更好的效果，你应该玩每个方块的大小，但要小心，因为dlt函数还需要知道方块的大小来计算允许的方格数量每行显示。我会让你玩得开心;）