个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
31
4
我使用的是卡片列表，点击后可以翻转这些卡片以显示其他信息。我想添加一些视角以使其看起来不错。
我的问题是，要为列表提供一些视角，我需要将视角附加到 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>最佳答案
Is there a way to give each element it's own perspective
我不知道我是否正确理解了您的问题，但我认为以下是您要查找的内容。通过赋予 perspective 值以及 transform 属性，您可以直接将它赋予每个元素(而不是像设置 时那样创建 3d 空间 属性。ul 上的 >perspective
这意味着每个元素无论是第一个元素、中间元素还是最后一个元素都将以与另一个元素相同的方式旋转。
透视也应用于未悬停或默认状态(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>关于每个元素的 CSS 透视图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42246691/
31
4
0
我使用的是卡片列表，点击后可以翻转这些卡片以显示其他信息。我想添加一些视角以使其看起来不错。 我的问题是，要为列表提供一些视角，我需要将视角附加到 ul 元素。原点然后由父级的大小定义，这使得中间的元
如何在 Java 中进行透视图转换？据我了解，我可以使用一些神奇的 4 维矩阵来确定 FOV、长宽比以及近距和远距观看距离，但我不知道如何创建该矩阵。 我能够在 Java 中实现“Perspectiv
我正在尝试制作一种仅使用 CSS 的幻灯片从一个内容部分过渡到另一个内容部分。为了以一种有趣的方式做到这一点，我使用 CSS 的 perspective 和 rotateX 从本质上放下页面内容。然后
由于某种原因，每当我使用 OpenCV 的 warpPerspective() 函数时，最终的变形图像不包含原始图像中的所有内容。图像的左侧部分似乎被切断了。我认为发生这种情况的原因是因为扭曲的图像是
我不知何故搞砸了我的观点，我想重置它们，但是重置按钮是灰色的。有谁知道会导致这种情况的原因吗？ 我希望我有更多的信息，但我真的只知道这些。 最佳答案 转到窗口菜单 => 重置透视图。 编辑: 该选项可
我正在drawRect方法内绘制一些形状。 注意:我没有使用 NSViews 或 Layers。 我正在将形状点转换为 3D，然后将它们绘制到屏幕上......但它们缺乏深度。 这是围绕 y 轴旋转
我正在评估 Eclipse 的 Enterprise IDE 插件，最终决定不购买它。卸载插件后，我留下了一堆无法删除的透视按钮(位于右上角的按钮)。如何在不破坏我的工作空间的情况下手动摆脱它？ 编辑
我正在研究根据按下方式倾斜的面板(使用 CSS)。您可以在此处查看工作演示(目前仅针对 Chrome 实现): http://jsfiddle.net/NathanFriend/4tXbZ/ 我注意到
我在使用 CSS 3D 透视属性时遇到问题。 Summer in the mountains 我只想为 :hover 处的 figcaption 设置动画以执行从 -90deg
我想做出与我在透 View 上右键单击并选择自定义以获取此窗口时得到的相同的行为 我只想以编程方式为我的视角自定义菜单和工具栏。 实际上，我只想删除我视角中的大部分菜单和工具栏，让它们在我切换到任
嘿，这些观点已经消失(不再可用)。我怎样才能让他们回来？谢谢 最佳答案 假设您安装了正确版本的 Eclipse、ADT 插件和 SDK: 窗口>打开透视图>其他>DDMS 主要的 android 编码
我正在尝试开发一个 spring boot 应用程序。我正在使用 Eclipse IDE。我从 Eclipse 市场安装了 STS。但我无法打开 Spring 透视图，也无法创建 spring 项目(
正如标题所说，我的 Bottom Sheet 有问题。 我想要在 Bottom Sheet 中添加一个 RecyclerView，其中包含可以随时更改的动态项目。 RecyclerView 前后也有组
在这里需要有关 Eclipse 的线程 View 透视图的帮助.. 由于某种原因，当我在线程 View 中选择特定线程时，看不到线程的详细信息(在刷新按钮下方) 类名被截断并且看不到文件/方法名列..
我正在尝试摆脱 css 中的 3d 转换功能。我此时的代码几乎是直接从教程中复制的，因为无论我多么努力，我似乎都无法让它正常工作。它应该看起来如何的链接是:http://desandro.gith
在 Eclipse 13.7 (Indigo) 中安装 Aptana Studio 3 插件版本后，我看不到 Aptana 透视图。插件已安装，但我无法在 Eclipse 中选择 aptana 透视图
我在墙上有一个图像。我想自己创建它的 3D 透视图。假设给定图像上的点、相机位置、相机方向，如何获得 3d 透视矩阵来播放原始图像？ 我知道我可以使用相机的方向来计算 3d 旋转矩阵，但我不知道如何计
当我将 Eclipse 与 SWT_GTK3 UI 结合使用时，我无法输入某些 UI 部分，例如 Eclipse Marketplace 或窗口 -> 透视图 -> 自定义透视图。 运行env SWT
我有一个点击样式，涉及点击时通过 3D 旋转倾斜元素。这是它的样子: 和here is a GIF of the effect working properly with a short list !
这支笔: http://codepen.io/jeremytm/pen/KzOayw 如何在不影响视角的情况下改变盒子的高度？ 例如，如果您更改高度，则顶 Angular 和底 Angular 将与之
我是一名优秀的程序员,十分优秀！