个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在尝试建立一个基于 3d 框的小网页。这个页面将是可滚动的，我希望消失点固定在中间，所以当我滚动时，3d 框应该动态地改变它们的外观。我能得到的唯一结果是:http://deesr.com/3dscroll/
在此版本中，消失点保持在起点，当我滚动时，框保持不变。
编辑:JS 完成了这项工作。我使用 OnScroll 事件检查滚动位置并重新设置 Perspective-Origin。让我知道是否有更好的解决方案!
最佳答案
我知道对 OP 来说已经太晚了，但对于遇到这个问题的所有其他人来说:
我能够通过在模拟主体滚动条的主体内使用
<html>
<head>
<style>
body {
padding: 0;
margin: 0;
}
body > * {
overflow: auto;
width: 100%;
height: 100%;
position: absolute;
perspective: 1000px;
}
</style>
</head>
<body>
<div>
3d objects
</div>
</body>
</html>完整示例:
<html>
<head>
<style>
body {
padding: 0;
margin: 0;
}
body > * {
overflow: auto;
width: 100%;
height: 100%;
position: absolute;
perspective: 1000px;
}
div#container {
width: 200%;
transform-style: preserve-3d;
}
#t,
#b,
#l,
#r {
margin-left: 45%;
margin-right: 45%;
width: 100px;
height: 100px;
background-color: yellow;
border: 10px solid black;
border-radius: 10px;
transform-style: preserve-3d;
}
#t {
transform: rotateX(270deg);
}
#b {
transform: rotateX(90deg);
}
#l {
position: relative;
top: 180px;
left: -60px;
transform: rotateY(270deg);
}
#r {
position: relative;
top: -180px;
left: 60px;
transform: rotateY(90deg);
}
</style>
</head>
<body>
<div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="container">
<div id="l">
<h1>left</h1>
</div>
<div id="t">
<h1>top</h1>
</div>
<div id="b">
<h1>bottom</h1>
</div>
<div id="r">
<h1>right</h1>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
</html>关于css - 滚动时更改 3D 透视 - 固定消失点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17403938/
25
4
0
我正在尝试使用透视投影描绘一个立方体，但我得到的只是一个正方形的角。正方形的面设置在原点并向正方向扩展。使用 glOrtho 我可以设置坐标系，但我在使用 glPerspective 做同样的事情时遇
SELECT j.departure, stopDepartures.* FROM journey j JOIN journey_day ON journey_day.journey = j.id J
我确实需要一些帮助来了解如何根据相似的值对表格进行透视。 day | startDate ----------------------- Monday | 09:00 Monday |
我有以下数据框 df = pd.DataFrame({ '1': ['Mon (07/08)','Sales', '2'], '2': ['Mon (07/0
dummy_df = pd.DataFrame({ 'accnt' : [101, 102, 103, 104, 101, 102, 103, 104, 101, 102, 103, 104,
public class MainActivity extends Activity { LinearLayout rotator; protected void onCreate(Bundle sa
我正在尝试通过 PHP 更改 ImageMagick 中 Plane2Cylinder 失真的视角。 为了帮助解释我在寻找什么，我制作了这张图: 您可以看到红色 block 的下部比顶部的半径更大，就
我有一个像这样的简单查询.. USE AdventureWorks; GO SELECT DaysToManufacture, AVG(StandardCost) AS AverageCost FRO
我希望我可以更改架构，但我受制于它，假设我有以下表格 JanDataTable FebDataTable MarDataTable ProductsTable 其中前三个表有 ID 和 Amount
我正在将我们的一个旧应用程序从 vb6 更新到 c#，在此过程中必须重新创建原始程序员设计的自定义控件。该控件简单地获取对象的尺寸，矩形或圆锥形，并在 3D 中放置对象的轮廓草图(我认为在技术上是 2
我一直在尝试在 MySQL 中对表进行透视(将行移动到列)。我知道 mysql 没有枢纽功能，所以我认为需要联合，但不是 100% 确定。我有三列，user_id、option_id 和 Questi
我正在尝试旋转像这样创建的 mysql 表 'CREATE TABLE `fundreturns` ( `Timestamp` datetime NOT NULL, `FundName` varcha
提前感谢任何对此提供帮助的人。我知道我以前做过这件事，没有太多痛苦，但似乎找不到解决方案 我的数据库看起来像这样: `tbl_user: ---------- id ( pkey )
我正在尝试开发 X 轴方向的卡片翻转动画。截至目前，div 现在只需使用 rotateX() 方法进行旋转。我试过对上层 div 使用透视属性，而不是工作它扭曲了我的 div 结构。因为，这只是一个工
我有一个带有 CSS3 透视图的 DIV 元素。 DIV 包含 2 个子 DIV，其中之一在 z 轴上有平移。这应该会导致一个 DIV 在另一个前面，因此后面的那个应该被挡住。 然而，这些 DIV 的
大家好，我有一张这样的 map http://sinanisler.com/demo/map/ 如您所见，有一些树，但不是真正的视角，我想要这个 http://sinanisler.com/demo/
我有以下代码将快照拍摄到帧缓冲区。我验证了帧缓冲区工作正常并且相机正确地面向对象。我曾经正确地完成图片，但它是基于错误的代码，使用了错误的截锥体。所以我决定重新开始(使用截锥体)。 物体以中间为中心，
我正在尝试将求和列添加到透视数据框，但不断收到数据解析错误。 mydata = [{'amount': 3200, 'close_date':'2013-03-31', 'customer': 'Cu
我正在尝试将一些 groupby/crosstabbing 逻辑应用于用户定义对象的 IEnumerable 列表，并且想知道是否有人可以帮助我。我坚持使用现有的(相当烦人的)对象模型来工作，但无论如
我想使用一个 CALayer 创建如下图所示的效果 - 而不是通过拆分图像、对两半进行透视变换然后将它们并排放置。 可以使用 CoreImage 以任何方式完成吗？ 或者，有人可以使用 OpenGL
我是一名优秀的程序员,十分优秀！