html - 图像切片的 css 转换不起作用

Question

经过仔细检查，重做多次，我确定这是一个 CSS 错误。它在 Chrome 和 IE 中生成。报告为 #718561 .

本质上，如果图像被切成超过 10 行和超过 3 列，并且每个切片都经过变换(缩放、倾斜、平移等)，则只有 3 列会变换。剩余的切片被渲染为原始图像的多个副本。

原始问题:

这似乎被问了很多，但我找不到这个问题的特定版本的引用:我的 CSS 只是不想工作。它将图像切成平板，然后对每个平板进行缩放或倾斜。我已经做了几次，而且它有效，但这个新版本没有。这是一个有效的 CSS 示例:

  div #first{
  margin-top: 45px;
  position:absolute;
clip: rect(0, 27px, 5px, 0px);
    -ms-transform: rotate(-6deg) translate(0px,-21px) ; /* IE 9 */
    -webkit-transform: rotate(-6deg) translate(0px,-21px) ; /* Chrome, 
Safari, Opera */
    transform: rotate(-6deg) translate(0px,-21px) ;
}

div #firstsecond{
  margin-top: 45px;
  position:absolute;
clip: rect(0, 112px, 5px, 27px);
    -ms-transform: rotate(21deg) translate(-40px,0px) ; /* IE 9 */
    -webkit-transform: rotate(21deg) translate(-40px,0px) ; /* Chrome, 
Safari, Opera */
    transform: rotate(21deg) translate(-40px,0px) ;
}

div #firstthird{
  margin-top: 45px;
  position:absolute;
clip: rect(0, 175px, 5px, 112px);
    -ms-transform: rotate(21deg) translate(-45px,0px) ; /* IE 9 */
    -webkit-transform: rotate(21deg) translate(-45px,0px) ; /* Chrome, 
Safari, Opera */
    transform: rotate(21deg) translate(-45px,0px) ;
}

带有此内容的 HTML 是:

                         <div id="first"> <img src="D.jpg"/></div>
                         <div id="firstsecond"> <img src="D.jpg"/></div>
                         <div id="firstthird"> <img src="D.jpg"/></div>
                         <div id="second"> <img src="D.jpg"/></div>

现在 CSS 不起作用:

div #firstone{
         margin-top: 25px;
         position:absolute; 
clip: rect(0px,  52px, 12px, 0px);
         -ms-transform:translate(0px, -8px);
      -webkit-transform:translate(0px, -8px);
     transform:translate(0px, -8px);
    }

div #onetwo{
     margin-top: 25px;
     position:absolute; 
clip: rect(12px, 52px, 24px, 0px);
     -ms-transform:translate(0px, -7px);
      -webkit-transform:translate(0px, -7px);
     transform:translate(0px, -7px);
    }

div #onethree{
     margin-top: 25px;
     position:absolute;
clip: rect(24px, 52px, 36px, 0px);
     -ms-transform:translate(0px, -6px);
      -webkit-transform:translate(0px, -6px);
     transform:translate(0px, -6px);
}

这个的 HTML:

                        <div id="firstone"> <img src="Z.jpg"/></div>
                        <div id="onetwo"> <img src="Z.jpg"/></div>
                        <div id="onethree"> <img src="Z.jpg"/></div> 

为什么第二个单元不起作用？有趣的是第二单元更简单。

Answer 1

删除div #first 之前的div。 问题是 div 和 ID 之间的空格。

像这样:#first{}