Question

我有一个无序的列表，包括3个冒号x 4行库中的12个图像。当悬停时，会应用变形比例。

如何将（3n + 1）个图像（图像1-4-7-10）的变换原点设置为LEFT 和第三（3 -6-9-12）元素到右边？

我试着在这里输入html和css，但收到了错误信息。

Answer 1

您没有指定转换源所需的y值（因此我认为是0），但是如果您将比例应用于图像，这应该可行（添加前缀为特定供应商）

li:nth-child(3n+1) img {
  transform-origin : 0 0;
}

li:nth-child(3n) img {
  transform-origin : 100% 0;
}

Answer 2

这是代码以及我认为如何通过css格式化它。

我在网站vsio.ru上放了一个工作示例草案。

我希望第一个第四个第四个....（3n + 1）图像，当盘旋为2倍时[转换：比例（2）] 并将原点设置为左侧和第三个第6个第9个......（3n）将变换原点设置为右侧。

（是否可能向伪元素（NTH-CHILD）申请一个虚假类别（HOVER）？以及如何？）

`

   section#gallery{
          Width:670px;
    }
  section#gallery ul li{
display:inline;}
   section#gallery ul li img{
width: 215px;
height:150px;
border: 2px solid #fff;
margin: 5px 0px 0px 0px;

-webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
   transition: all 0.5s ease;}

      }


     section#gallery ul li img:hover {

-webkit-transform:scale(2) ;
-moz-transform: scale(2);
-o-transform: scale(2);
-ms-transform: scale(2);
     transform: scale(2);
    -webkit-box-shadow:1px 1px 2px 1px  #999999;
    }

`

图片库效果不佳

2 个答案: