同时应用两个不同的CSS转换 [英] Apply two different CSS transforms simultanesouly
问题描述
我正在研究一个脚本,该脚本基于光标位置使用向左和向右变换来调整图像.
还有一些CSS可以将鼠标悬停在图片上.
I am working on a script to adjust an image using transform left and right based on the cursor position.
There is also some CSS to zoom the image on hover.
// 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;
});
imageWatch();
html,body { height:100%}
body {margin: 0; padding: 0;}
*, *::before, *::after {
content:"\0020";
box-sizing: border-box;
}
.poster {
display: inline-block;
width: 32vw;
height: 100vh;
position:relative;
overflow:hidden !important
}
.image-area {
position: absolute;
width: 100%;
height: 100vh;
opacity: .24;
transition: 2.5s ease;
}
.image-area {
opacity: 1;
}
.image-area > img {
margin-top: -312px;
margin-left: -913px;
width: auto;
/* height: auto */
height: 1000px;
transform: scale(1,1);
transition:8s all;
}
.poster:hover .image-area > img {
transform: scale(1.3,1.3)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="poster">
<div class="image-area">
<img class="poster" src="https://vignette1.wikia.nocookie.net/logopedia/images/f/fc/Sky_Believe_in_better_logo.jpg/revision/latest?cb=20110910152552" alt="Sky" />
</div>
</div>
<div class="poster">
<div class="image-area">
<img class="poster" src="https://vignette1.wikia.nocookie.net/logopedia/images/f/fc/Sky_Believe_in_better_logo.jpg/revision/latest?cb=20110910152552" alt="Sky" />
</div>
</div>
<div class="poster">
<div class="image-area">
<img class="poster" src="https://vignette1.wikia.nocookie.net/logopedia/images/f/fc/Sky_Believe_in_better_logo.jpg/revision/latest?cb=20110910152552" alt="Sky" />
</div>
</div>
我的JS使用的是transform属性,我的CSS也使用它来使鼠标悬停缩放.我认为这是问题所在.
My JS is using the transform property, and so is my CSS to make it zoom on hover. I think this is the problem.
如果您从CSS中删除了转换,则脚本可以正常工作,但是我需要 transition:8s all
,图像才能在鼠标悬停时进行缩放,并使其与光标对齐.
If you remove the transform from the CSS, the script works fine, but I need the transition:8s all
for the image to zoom on hover, as well as to align it with the cursor.
此 SO 告诉我,您可以拥有两个转换属性但它们必须在一条线上.我该如何使用Javascript做到这一点?
This S.O informed me that you can have two transform properties but they must be on one line. How do I do that with my Javascript?
推荐答案
transform
是一个属性,因此您不能仅以CSS为目标,例如,不能为两个CSS设置不同的 transition-duration
在同一 transform中应用的变换功能
属性.
transform
is a single property, so you can't target from CSS for only part of it, e.g, you cannot set different CSS transition-duration
for two transform-functions applied in the same transform
property.
您可以通过js编写所有内容,并随着时间的推移更新两个变换函数的值,但这需要大量的工作,以实现潜在的非硬件加速结果,并且有一个简单的解决方法.
You could write everything through js, updating yourself both transform-functions values over time, but that would be a lot of work, for a potentially non-hardware accelerated result, while there is a simple workaround.
最简单的解决方案是更改您的结构,以便将 scale
应用于包装器元素,并将平移应用于内部元素.
The easiest solution is to change a little bit your structure so that you apply the scale
on a wrapper element, and the translate on the inner-one.
通过这种方式,这两种转换都将应用到您内部的< img>
上,但是它们不会相互冲突.
This way, both transforms are applied on your inner <img>
, but they don't conflict each other.
// 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;
});
imageWatch();
html,
body {
height: 100%
}
body {
margin: 0;
padding: 0;
}
*,
*::before,
*::after {
content: "\0020";
box-sizing: border-box;
}
.poster {
display: inline-block;
width: 32vw;
height: 100vh;
position: relative;
overflow: hidden !important
}
.image-area {
position: absolute;
width: 100%;
height: 100vh;
opacity: .24;
transition: 2.5s ease;
}
.image-area {
opacity: 1;
}
.image-area img {
margin-top: -312px;
margin-left: -913px;
width: auto;
/* height: auto */
height: 1000px;
/* here we can remove the transition */
}
/* scaling on hover is only applied on the parent elmt */
.image-area>.scaler {
transform: scale(1, 1);
transition: 8s transform;
}
.poster:hover .image-area>.scaler {
transform: scale(1.3, 1.3);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="poster">
<div class="image-area">
<!-- the scaling wrapper-->
<div class="scaler">
<img class="poster" src="https://vignette1.wikia.nocookie.net/logopedia/images/f/fc/Sky_Believe_in_better_logo.jpg/revision/latest?cb=20110910152552" alt="Sky" />
</div>
</div>
</div>
<div class="poster">
<div class="image-area">
<!-- the scaling wrapper-->
<div class="scaler">
<img class="poster" src="https://vignette1.wikia.nocookie.net/logopedia/images/f/fc/Sky_Believe_in_better_logo.jpg/revision/latest?cb=20110910152552" alt="Sky" />
</div>
</div>
</div>
<div class="poster">
<div class="image-area">
<!-- the scaling wrapper-->
<div class="scaler">
<img class="poster" src="https://vignette1.wikia.nocookie.net/logopedia/images/f/fc/Sky_Believe_in_better_logo.jpg/revision/latest?cb=20110910152552" alt="Sky" />
</div>
</div>
</div>
这篇关于同时应用两个不同的CSS转换的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!