在网格中切割图像并翻转它

Question

示例图片：

*对不起，实际上网格的大小不正确，仅举例来说。

如何根据网格切割它并将其翻转？实际上我想要的是翻转之后，它会显示如下内容：

我该怎么办？我希望我不需要剪切所有图像，如果可以的话，只需放置壁纸，它就会自动剪切。

Answer 1

使用background-position是将一些图像分成小块的众所周知的方法。通过这种技术，您可以一步一步完全解决您的问题。我已经尝试过这段代码来演示技术并解决你的问题。

<强> HTML ：

<div class='canvas'></div>

<强> CSS ：

.canvas {
  background:url('http://placekitten.com/500/300');
  width:500px;
  height:300px;
}
.cell {    
  float:left;    
  position:relative;
  cursor:pointer;
}
.cell > .front {            
  -webkit-backface-visibility: hidden; 
  backface-visibility:hidden;
  -webkit-transform-style:preserve-3d;
  transition:all 1s;
}
.cell:not(.flipped) > .back {
  -webkit-transform:rotateY(180deg);
}
.cell.flipped > .front {
  -webkit-transform:rotateY(180deg);
}
.back {
  background:pink;
}
.cell > .back {
  position:absolute;
  text-align:center;
  font-size:30px;
  color:red;    
  left:0;
  top:0;    
  transition:all 1s;    
}
.cell > .back:before {
  content:'';
  display:inline-block;
  height:100%;
  vertical-align:middle;
}
.cell > * {
  border: 1px solid orange;    
  box-sizing:border-box; 
  width:100%;
  height:100%; 
}

<强> JS ：

//get the canvas
var canvas = $('div.canvas');
var backgroundImage = canvas.css('background-image');
//remove the background from canvas
canvas.css('background-image','none');
//number of columns and rows
var col = 8;
var row = 4;
var colWidth = canvas.width() / col;
var rowHeight = canvas.height() / row;
//loop through the cells
for(var i = 0; i < row; i++){
  for(var j = 0; j < col; j++){
    //append new cell to canvas
    var cell = $("<div class='cell flipped'><div class='back'>?</div><div class='front'></div></div>")
               .width(colWidth).height(rowHeight).appendTo(canvas);
    //set the background for the cell
    //note that calculate the em unit for more flexible
    //font-size
    cell.find('.front')
        .css('background',backgroundImage)
        .css('background-position', -(j * colWidth) + 'px ' + -(i * rowHeight) + 'px');
    //register click handler for the cell
    cell.click(function(){$(this).toggleClass('flipped')});
  }
}

注意：请在基于webkit的浏览器中测试演示，我刚为基于webkit的浏览器添加了前缀（适用于backface-visibility，transform，.. ）。另请注意，此代码不完整，它只是帮助您开始满足您的实际要求。

关于CSS的一点解释，实际上你需要在一个单元格上有2个面，.front和.back面，.front来渲染图像和{{1} }渲染文本（单元格翻转后）。在翻转状态下，.back应围绕.front轴（垂直轴）旋转180deg，但其Y应设置为backface-visibility。相反，hidden应该在正常状态下围绕Y轴旋转.back。

Demo.

更新：某些浏览器不支持180deg功能（例如 Maxthon ），因此您有另一个漂亮的解决方法使用backface-visibility代替。在翻转状态下，z-index应该有更高.back（例如z-index）来覆盖1，而在正常状态下，它应该为零.front所以它隐藏在z-index后面。以下是 Updated Demo 处理不支持.front的浏览器