是否可以在同一元素上应用CC平移X和Y？
如果我尝试这个翻译,翻译会覆盖translateX:
.something {
transform: translateX(-50%);
transform: translateY(-50%);
}
我有以下细节:
<g transform="translate(20, 50) scale(1, 1) rotate(-30 10 25)">
需要将以上行更改为:
<g transform="matrix(?,?,?,?,?,?)">
任何人都可以帮我实现这个目标吗？
我尝试transition在Firefox 15上使用它并不起作用,即使它适用于其他版本的Firefox和其他浏览器,如Chrome和Safari.
当我使用Firefox的检查器查看属性时,它会transition被触发并出现"无效的属性值"错误.MDN和caniuse表示它支持Firefox 4及更高版本!
#mydiv {
transition: width 1s; /* Did I do this wrong? */
background: #f00;
width: 100px; height: 100px;
}
#mydiv:hover { width: 200px }
为什么有时像性质transition和animation工作在一些浏览器,并在其他无效？
免责声明:这是通过添加供应商前缀可以完全解决的所有问题的规范复制品.Stack Overflow问题不应该如此宽泛,除非在meta上讨论并且之后创建的规范答案就像这样.
我正在编写一个脚本,根据光标位置左右变换调整图像.
还有一些CSS可以在悬停时缩放图像.
// JavaScript source code
var catchX = 0,
catchY = 0,
x = 0,
y = 0,
burn = 1 / 28;
function imageWatch() {
x += (catchX - x) * burn;
translate = 'translate(' + x + 'px, ' + y + 'px)';
$('.image-area img').css({
'-webit-transform': translate,
'-moz-transform': translate,
'transform': translate
});
window.requestAnimationFrame(imageWatch);
}
$(window).on('mousemove click', function (e) {
var mouseX = Math.max(-100, Math.min(100, $(window).width() / 2 - e.clientX));
catchX = (26 * mouseX) / 100;
}); …我正在尝试使用 @keyframes 的 css 动画，但是 css Transform rotate 和 translate 属性不能一起工作。
请告知这里出了什么问题。谢谢！！
您可以在 codepen 上查看代码：http ://codepen.io/anon/pen/XdzwZB
以下是我的@keyframes 代码：
@keyframes slideIn {
0%, 100% {
transform: translate(10px);
transform: rotate(0deg);
color: red;
}
25% {
transform: translate(125px);
transform: rotate(360deg);
color: green;
}
}
如何一次在X和Y方向上旋转卡？
我有一个图像,我想在X和Y方向旋转它!
这是HTML,
<div class="card"></div>
这是CSS,
.card {
background-image: url("https://i.stack.imgur.com/FW7wN.png");
height: 100px;
margin: 50px auto;
position: relative;
width: 100px;
-webkit-transition: .5s linear;
-webkit-transform-style: preserve-3d;
}
.card:hover {
-webkit-transform: rotateX(60deg);
}
如果我将Y转换添加到悬停,它将进行唯一的第二次转换并忽略第一次转换
.card:hover {
-webkit-transform: rotateX(60deg);
-webkit-transform: rotateY(60deg);
}
如何在X和Y对角线中翻译该卡？请帮我!
最近几天我在学习“变换”，现在我知道如何通过变换的矩阵进行翻译、旋转、倾斜、缩放。但是如果我想在一个转换语句中完成上述所有操作，我该怎么做？
ctx.transform(a,b,c,d,e,f);
当我们想通过变换旋转某些东西时，我们必须为每个（a，b，c，d）发布 4 个参数，所以，如果我想旋转和缩放，例如，旋转 30 度和缩放（1.5,2），可以变换是同时完成的吗？那么 (a,b,c,d) 的值是多少？以及如何计算它们？
另一个问题：转换中有顺序吗？我的意思是如果我使用变换来旋转、缩放和平移，它们之间的顺序是什么？毕竟顺序很重要，“先翻译，再缩放”和“先缩放，再翻译”，会得到不同的结果。