标签: transform
如何设置webkit-transform-origin在其边缘滚动3D立方体？
我正在摆弄CSS3观点和转换.从这个伟大的3D立方体示例开始,我想修改立方体,使其不仅围绕其中心旋转,而且在其边缘上滚动.
我通过围绕z轴旋转立方体来获得第一个左倾斜工作-webkit-transform-origin: bottom left(参见小提琴 ;为简单起见,示例限于左倾斜).对于随后的左倾斜,我正在努力如何进一步调整原点.从概念上讲,我需要设置相对于父容器的原点(即对于连续的左倾斜,它应该以200px的步长逐渐向左移动).
任何帮助是极大的赞赏!
推荐指数
解决办法
查看次数
如何将ELF可执行文件转换为C代码？生成的C代码不必是人类可读的
我有一个ELF文件，我想将其反编译为C代码，并对生成的C代码进行简单的更改，然后将其重建为ELF。
反编译的C代码不需要完全可读。例如，如果混淆了变量和函数名称，那就可以了。
我可以使用哪些工具在Linux上完成此任务？
PS：如果C无法进行编译或不容易进行编译，尽管对汇编源进行调整对我来说非常困难，但我愿意考虑对汇编语言进行反编译。
更新：您可能会假设我正在使用以下C程序来获取我的a.outELF。现在，进一步假设我已经失去了这个原始C资料。所以，我现在想将其编译到（一个可能混淆），C其中我至少能够改变像琴弦的小东西源"world"，"Hello"和"Bye"，或能扭转感if等语句
#include <stdio.h>
#include <string.h>
char buf[256];
const char *Hello = "Hello";
const char *Bye = "Bye";
const char *Who = "world";
char * greet(const char *greeting, const char *str) {
strcpy(buf, greeting);
strcat(buf, ", ");
strcat(buf, str);
strcat(buf, "!");
return buf;
}
int main(int argc, char *argv[]) {
int sayHello …推荐指数
解决办法
查看次数
CSS转换后,可点击链接区域意外缩小
我有一个无序列表,其中包含一些列表项,使用CSS 3D转换作为翻转卡片.我希望他们通过单击列表项中的链接/锚元素来翻转,这些链接也会填满整个列表项.
列表项在默认的非翻转状态下看起来很好,但是一旦我点击它并且它翻转,它背面的可点击链接区域只在列表项的上半部分.当我在Chrome中检查时,链接区域仍然填满了列表项的整个高度,因此我不确定发生了什么.
小提琴:http://jsfiddle.net/chucknelson/B8aaR/
下面是我在各种元素上使用的变换属性的摘要(详见小提琴):
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 100% 1.5em;
-webkit-transform: rotateX(180deg);
请注意,我在Windows上测试Chrome 28,而我只是在小提琴中使用-webkit前缀项.我也为任何凌乱的CSS或标记道歉,这个问题让我迭代了一下.非常感谢任何有助于理解正在发生的事情的帮助!
更新8/11/2013:
我在列表项上进行2D转换时遇到了同样的问题(只是翻转项目,没有前/后).在CSS中为<a>标签添加@ thirtydot的translateZ(1px)变换也固定了那个.所以看起来这个问题与z轴有关......但仅限于链接的一部分.也许这是浏览器中的错误？
推荐指数
解决办法
查看次数
带有旋转和翻译问题的CSS透视图
我试图使一种类型的CSS仅从一个内容部分滑动到另一个内容部分.为了以有趣的方式这样做,我使用CSS perspective并rotateX实质上放下页面内容.然后我尝试使用内容将内容滑出到屏幕底部translateY
另外,无论是translateY和rotateX工作完美,无论是什么perspective是.但是,组合时,它仅适用于perspective基于窗口大小和rotateY值的某些s
在这个jsFiddle中,它在我尝试的窗口大小中按照我的意愿工作.问题是我希望perspective价值更低250px,但我不能在不打破动画的情况下这样做.
我尝试使用更高的rotateY学位,而不是perspective降低,但同样的问题发生
@keyframes slide {
0% { transform: perspective(450px); }
25% { transform: perspective(450px) rotateX(30deg); }
50%,100% { transform: perspective(450px) rotateX(30deg) translateY(100%); }
}
我已经在FireFox和Chrome上对CSS Deck和jsFiddle进行了测试,这似乎是一个一致的问题
任何人都可以告诉我为什么会发生这种情况并提供解决方案吗？
推荐指数
解决办法
查看次数
用jQuery动画translate3d
我正在尝试使用Jquery 2.1.1为translate3d设置动画.在10秒钟内.然后,当动画完成时,我希望它提醒我.但问题是它没有动画.它只是立即改变到新的CSS.
有一些英雄可以帮我这个吗？
我现在使用的代码:
$( ".circle" ).animate({ textIndent: 100 }, {
duration : 10000,
step : function() {
$(this).css("transform","translate3d(0px, 320px, 0px)");
},
complete : function() {
alert("completed the animation");
}
},'linear');
推荐指数
解决办法
查看次数
CSS:在webkit上一起使用object-fit和transform时出现的问题
我正在尝试使用元素object-fit: cover上的css属性img来使我的图像填充其包含div并使transform: scale(xx)图像在悬停时缩小.
这是一个小提琴示例:https://jsfiddle.net/96kbuncq/
编辑:带有真实图像的示例:https://jsfiddle.net/96kbuncq/3/
HTML:
<div>
<div class="category">
<img src="http://placehold.it/1200x950&text=1200x950+-+Category+1+-" />
</div>
<div class="category">
<img src="http://placehold.it/1200x950&text=1200x950+-+Category+2+-" />
</div>
<div class="category">
<img src="http://placehold.it/1200x950&text=1200x950+-+Category+3+-" />
</div>
</div>
CSS:
.....
div.category img {
display: block;
height: 100%;
width: 100%;
object-fit: cover;
object-position: center;
}
/* Transformations */
div.category img {
transition: transform 0.35s;
transform: /*translateZ(0)*/ scale(1.12);
}
div.category:hover img {
transform: /*translateZ(0)*/ scale(1);
}
这在Firefox中运行良好,但在Chrome和Opera中我遇到以下问题:
- 当悬停第一个时
div,另外两个也受到影响(当悬停第二个时,第三个也受到影响), …
推荐指数
解决办法
查看次数
CSS Animation\Transformation中的旋转方向
关于CSS Animation\transform的疑问.我试图理解CSS动画并遇到以下问题:
一个简单的div,动画在CSS中附加到它,如下所示
<div id="learn">LEARN</div>
#learn {
width : 100px;
height : 100px;
background : blue;
position : relative;
animation: test1 5s ease-in 2s infinite;
}
情况1 :
@keyframes test1 {
0% {
transform: rotate(179deg);
}
100% {
transform: rotate(357deg);
}
}
情况2(0%变换分为90 + 89度而不是179度):
@keyframes test1 {
0% {
transform: rotate(90deg) rotate(89deg);
}
100% {
transform: rotate(357deg);
}
}
为什么第一种情况顺时针旋转而第二种情况逆时针旋转？
推荐指数
解决办法
查看次数
变换比例导致间隙/线
我目前正在构建一个网站，并且遇到了transform: scale. 我有一个按钮，当用户将鼠标悬停在它上面时，会发生两件事：
- 背景对角线“扫过”
- 按钮标签颜色变化
- 按钮略微增长
我已经开始工作了，它看起来非常好，但是在实施第3点之后，当按钮增大时，我看到左侧有一个奇怪的间隙。
这是我的代码：点击演示
HTML
<a href="#" class="button">Hover</a>
CSS
body {
text-align: center;
padding-top: 10%;
}
.button {
display: inline-block;
text-transform: uppercase;
font-size: 1.1em;
font-weight: 600;
background: transparent;
transition: all ease .25s;
border: 3px solid green;
color: green;
position: relative;
overflow: hidden;
z-index: 2;
font-family: sans-serif;
padding: 20px 35px;
text-decoration: none;
}
.button:before {
content: ' ';
transition: all ease-out .25s;
width: 200%;
height: 100%;
position: absolute;
top: 0;
left: 0; …推荐指数
解决办法
查看次数
仅偏向元素的一侧
我想要得到这个图像的结果: 
我试过了:
#parallelogram-container {
margin: 0 50px;
}
.parallelogram {
background: #008dd0;
width: 200px;
border: none;
display: inline-block;
height: 90px;
-moz-transform: scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg);
-webkit-transform: scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg);
transform: scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg);
transform-origin: 50% 50%;
padding: 0px;
margin: 0 1px;
}
.parallelogram:first-child {
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
.parallelogram-btn {
width: 60px;
background: #ffa008;
color: #FFF;
border: none;
display: inline-block;
height: 90px;
-moz-transform: scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg);
-webkit-transform: scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg);
transform: scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg); …推荐指数
解决办法
查看次数
如何使用python将一张图像的相位和不同图像的幅度合并为一张图像
我想将一张图像的相位谱和不同图像的幅度谱组合成一张图像。
我已经得到了图像 A 和图像 B 的相位谱和幅度谱。
这是代码。
f = np.fft.fft2(grayA)
fshift1 = np.fft.fftshift(f)
phase_spectrumA = np.angle(fshift1)
magnitude_spectrumB = 20*np.log(np.abs(fshift1))
f2 = np.fft.fft2(grayB)
fshift2 = np.fft.fftshift(f2)
phase_spectrumB = np.angle(fshift2)
magnitude_spectrumB = 20*np.log(np.abs(fshift2))
我试图弄清楚，但我仍然不知道该怎么做。
下面是我的测试代码。
imgCombined = abs(f) * math.exp(1j*np.angle(f2))
我希望我能像那样出来
推荐指数
解决办法
查看次数