每个元素的CSS透视图

问题描述：

我正在使用可点击的卡片列表来显示其他信息。我想添加一些观点，使其看起来不错。每个元素的CSS透视图

我的问题是，给列表一些观点，我需要附加透视的ul元素。然后由父母的大小定义原点，使得中间的元素没有透视，而上下的元素以非常难看的方式变换。

有没有一种方法可以让每个元素都拥有自己的透视图，以获得流畅的3D外观，最好不使用JavaScript？

ul { 
 
    perspective: 600px; 
 
} 
 
li { 
 
    list-style: none; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 5px; 
 
    background-color: lightgrey; 
 
    transition: all .3s ease; 
 
} 
 
li:hover { 
 
    transform: rotateY(180deg); 
 
}

<body> 
 
    <ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    <li>7</li> 
 
    </ul> 
 

 
</body>

答

有没有给每个元素它自己的观点

我不知道如果我理解正确你的问题的方式但我认为下面是你要找的。通过将perspective值与transform属性一起给出，您直接将其分配给每个元素（而不是像在ul上设置perspective属性时那样创建3d空间）。

这意味着每个元素无论是第一个还是中间还是最后都会以与另一个相同的方式旋转。

该透视图也适用于非悬停或默认状态（li选择器），因为反向转换也应该正确进行。如果没有设置，（a）在悬停时视角将无法正确应用;（b）在快速悬停时有时会导致运动不稳。

你可以在this CSS Tricks article找到更多的信息。正如您在演示中所看到的那样，当透视图直接分配给子代时，它们看起来都不一样，而不像它应用于父代时。

（注：（1）我已经改变了转换时间有点只是为了演示（2）你不得不玩的角度值，获得您正在寻找确切的疗效因为我会把调整留给你。）

li { 
 
    list-style: none; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 5px; 
 
    background-color: lightgrey; 
 
    transition: all 1s ease; 
 
    transform: perspective(125px) rotateY(0deg); 
 
} 
 
li:hover { 
 
    transform: perspective(125px) rotateY(180deg); 
 
}

<body> 
 
    <ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    <li>7</li> 
 
    </ul> 
 

 
</body>

非常感谢，这正是我一直在寻找的。我投了你的答案，但我还没有足够的声望，使其数。 –

@ SinanAl-Kuri：没关系。因为你没有足够的代表（15），所以你不能投票回答。但您可以将答案标记为已接受。点击与此答案对应的投票按钮下方的空白/空白勾号标记。这通常是如何将问题标记为“解决”在SO中。而且，不客气:) – Harry

答

尝试此

ul { 
 
    perspective: 600px; 
 
} 
 
li { 
 
    list-style: none; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 5px; 
 
    background-color: lightgrey; 
 
    transition: all 2s ease-out; 
 
} 
 
li:hover { 
 
    -webkit-transform: rotateY(-180deg); 
 
    transform: rotateY(-180deg); 
 
}

<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    <li>7</li> 
 
</ul>

抱歉，你是怎么，只是加入了-webkit前缀改变？ –

答

我的想法是设置内部容器即<span>在每个li，并保持li静态，改造内部元件：

ul { 
 
    -webkit-perspective: 600px; 
 
    perspective: 600px; 
 
} 
 
li { 
 
    list-style: none; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 5px; 
 
} 
 
li span { 
 
    display: block; 
 
    height: 100%; 
 
    background-color: lightgrey; 
 
    transition: all .3s ease; 
 
} 
 
li:hover span { 
 
    transform: rotateY(180deg); 
 
}

<body> 
 
\t <ul> 
 
\t \t <li><span>1</span></li> 
 
\t \t <li><span>2</span></li> 
 
\t \t <li><span>3</span></li> 
 
\t \t <li><span>4</span></li> 
 
\t \t <li><span>5</span></li> 
 
\t \t <li><span>6</span></li> 
 
\t \t <li><span>7</span></li> 
 
\t </ul> 
 

 
</body>

我知道这个解决方案来解决悬停闪烁，谢谢。但它不能解决透视问题。 –

每个元素的CSS透视图

相关推荐