Question

我正试图让一些图像看起来像宝丽来。我希望通过使用:nth-child属性来轮换随机化，但到目前为止，它根本没有工作。有任何想法吗？

这是HTML：

<div class="polaroid">
    <a href="#building" title="Building"><img src="building.jpg"></a>
    <a href="#car" title="Car"><img src="car.jpg"></a>
    <a href="#building" title="Building"><img src="okay.jpg"></a>
    <a href="#sky" title="Sunset over a City"><img src="sky.jpg"></a>
    <a href="#street" title="Street in Tokyo"><img src="street.jpg"></a>
    <a href="#sunset" title="Sunset on the Beach"><img src="sunset.jpg">
    <a href="#tiger" title="Tiger"><img src="tiger.jpg"></a>
    <a href="#tree" title="Palm Trees"><img src="trees.jpg"></a>
    <a href="#turtle" title="Turtle"><img src="turtle.jpg"></a>
    <a href="#water" title="Waterfall"><img src="water.jpg"></a>
</div>

这是我一直试图用来旋转每个第三张图像的CSS。我顺便使用Chrome。

.polaroid:nth-child(3n) a {
    -webkit-transform: rotate(-8deg); 
}

Answer 1

:nth-child不会适用于该类，只适用于该元素，以及当您需要向子级a申请时将其应用于父级，然后将img设置为{{ 1}}

rotate

a:nth-child(3n) img {
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  transform: rotate(-8deg);
  border: red solid
}
img {
  border: yellow solid
}

nth-child在css中使用旋转不工作

1 个答案: