Question

经过仔细检查，多次重做，我确定这是一个CSS bug。它是在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 for this：

                        <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{}

Answer 2

检查this小提琴。你的CSS需要改变一下。不要在div #id使用div#id而不是

之间留出空格

<强> 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);
}

Answer 3

我认为这是一个CSS错误。我将其报告为718561。

有效的版本有三（3）列变换或有限行数。我想将图像切成19行4列。只有3列会变换，或只有6或8行。

我浏览了所有内容，但就好像有一个墙，之后CSS转换无法运行。

css变换图像切片不起作用

3 个答案: