如何壓扁鑽石
[英]how to squish a diamond
問題描述
我正在嘗試制作菱形網格，但我希望菱形的高度小於寬度。
var x = 8; var y = 7; var grid = function(row, column) { var sum = ""; for (var y = 0; y < (row); y++) { sum += '<div class="diamond clearfix">' for (var i = 0; i < column; i++) { sum += '<div class="dia"><div id="r' + y + 'c' + i + '" class="grid"><div class = "grid-img img-29"></div></div><div id="r' + (Number(y) + 1) + 'c' + i + '" class="grid"><div class="grid-img img-30"></div></div></div>' } sum += '</div>' } document.getElementsByTagName('body')[0].innerHTML = sum; } grid(x, y);
.diamond { margin-left: 1%; margin-bottom: 1%; width: 100%; }.dia { float: left; margin-right: 2.5%; width: 3%; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); height: 17.4%; width: 5.50%; } div { display: block; }.grid { position: relative; overflow: hidden; float: left; margin-top: -1%; width: 100%; padding-bottom: 100%; border: 1px solid; /* width: 107%; */ height: -2%; }.grid-img { position: absolute; top: -25%; left: -25%; width: 150%; height: 150%; background-position: center; background-repeat: no-repeat; background-size: cover; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
<div class="dia"> <div class="grid"> <div class="grid-img img-29"></div> </div> <div class="grid"></div> <div class="grid-img img- 30"></div> </div>
問題是我只是旋轉正方形使其看起來像鑽石，我無法將正方形控制為鑽石，所以當我移除一些高度時它看起來仍然是正方形所以有什么方法可以壓扁鑽石或以不同的方式創建它？
2 個解決方案
解決方案1
2 已采納 2019-04-09 11:44:07
您可以在父元素.diamond上使用 CSS transform 屬性來縮放 Y 軸。
var x = 8; var y = 7; var grid = function(row, column) { var sum = ""; for (var y = 0; y < row; y++) { sum += '<div class="diamond clearfix">'; for (var i = 0; i < column; i++) { sum += '<div class="dia">'+ '<div id = "r' + y + 'c' + i + '" class="grid">'+ '<div class = "grid-img img-29"></div>'+ '</div>'+ '<div id = "r' + (y + 1) + 'c' + i + '" class="grid">'+ '<div class="grid-img img-30"></div>'+ '</div>'+ '</div>'; } sum += '</div>' } document.getElementsByTagName('body')[0].innerHTML = sum; } grid(x, y);
.diamond { transform: scaleY(0.8); margin-left: 1%; margin-bottom: 1%; width: 100%; }.dia { float: left; margin-right: 2.5%; width: 3%; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); height: 17.4%; width: 5.50%; margin-bottom: -21px; } div { display: block; }.grid { position: relative; overflow: hidden; float: left; margin-top: -1%; width: 100%; padding-bottom: 100%; border: 1px solid; /* width: 107%; */ height: -2%; }.grid-img { position: absolute; top: -25%; left: -25%; width: 150%; height: 150%; background-position: center; background-repeat: no-repeat; background-size: cover; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
解決方案2
-1 2019-04-09 11:42:30
您可以嘗試以下頁面的“Diamond Narrow”示例： https ://css-tricks.com/the-shapes-of-css/
也許你可以稍微修改一下以滿足你的需要？
<html>
<style>
#diamond-flat {
position: relative;
width: 0;
height: 0;
border: 50px solid transparent;
border-right: 70px solid blue;
}
#diamond-flat:after {
content: '';
width: 0;
height: 0;
position: absolute;
border: 50px solid transparent;
border-left: 70px solid blue;
top: -50px;
left: 70px
}
</style>
<body>
<div id="diamond-flat">
</div>
</body>
</html>
我如何為這個鑽石圖像設置動畫，使其看起來像 3d 鑽石向下旋轉？
[英]How I can animate this diamond image so it looks as 3d diamond is rotating downward?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.