情况:
在我的特定情况下,我有3D相框图像和2D照片.我希望2D照片使用CSS3变换功能(旋转,缩放,偏斜)匹配3D帧.
问题:
我无法使用手动方法精确匹配两者,也就是输入旋转值并观察它的作用.
理想的解决方案#1
存在在线视觉工具,可以拖动照片的角落(就像Photoshop一样),它可以为您提供正确的CSS3变换值.
理想的解决方案#2
存在非可视化工具 - 与之前相同,但您手动输入4点坐标(图像角),它会为您提供正确的CSS3变换值.
真正解决这个问题
如果没有这样的工具(我的搜索没有找到),我希望有人尝试解释它背后的数学,这样我就可以自己计算 - 如果有可能的话？
我为你准备了JSFiddle演示: Demo
/* Main issue here */
.transform {
transform: rotateX(34deg) rotateZ(13deg) rotateY(-10deg) scaleY(1) scaleX(1) skewY(0deg) skewX(0deg) translateY(0px) translateX(20px);
transform-origin: 50% 0% 0;
}
/* Supporting styles */
.container {
position: relative;
width: 500px;
height: 500px;
}
.frame,
.photo {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.photo {
top: 50px;
left: 95px;
right: 65px;
bottom: …我正在尝试使用JavaScript重新创建具有视差效果的网站.这意味着我有两个或更多层,在滚动时移动不同的速度.
在我的情况下,我只移动一层,另一层保持静态:第1层=网站文本; 第2层=元素背景;
为此,我使用简单的源代码(使用jQuery 1.6.4):
var docwindow = $(window);
function newpos(pos, adjust, ratio){
return ((pos - adjust) * ratio) + "px";
}
function move(){
var pos = docwindow.scrollTop();
element.css({'top' : newpos(pos, 0, 0.5)});
}
$(window).scroll(function(){
move();
});
问题: - 所有计算都正确完成,效果"按预期"起作用.但是在某些浏览器下存在一些性能故障(Chrome MAC/Windows,Opera MAC,IE,反而不是Safari).
滚动期间我看到了什么？ - 滚动时背景与滚动一起向一个方向移动,但似乎偶尔向后跳几个像素,这会产生非常令人不安的效果(不流畅).
我尝试过的解决方案: - 添加一个计时器来限制滚动事件 - 使用短时间的.animate()方法而不是.css()方法.
我还观察到,使用.scrollTo方法(scrollTo jQuery插件)时动画很流畅.所以我怀疑触发滚动事件有点错误(太快).
你有没有观察到同样的行为？你知道吗,怎么解决？你能发布更好的解决方案吗？
感谢所有回复
编辑#1:在这里你可以找到jsfiddle演示(带定时器):http://jsfiddle.net/4h9Ye/1/
作为一名开发人员，我希望拥有多个可以使用不同版本的 NODE js 的项目。此外，当我从 GIT 存储库签出新项目时，我理想情况下希望只运行一个命令，所有事情都会自动化。
鉴于该文件.nvmrc允许自动切换每个目录的 NODE 版本。鉴于我的项目是建立在特定版本的 NODE 之上的，可能无法在任何其他版本中工作。
我应该将其提交给 GIT 吗？
这可能是基于意见的问题，但我实际上是在问这样做的缺点。 有什么风险吗？
--
背景：
这是我开始在新公司工作后的第一次承诺。我的前同事拒绝了该 PR（没有之前的辩论），当我询问时，他告诉我使用正确版本是开发人员的责任。
好吧，我还是添加.nvmrc并.gitignore使用了它。nvm use xx否则，每次在终端中打开新窗口时，我都需要输入内容。