2つの異なるCSS変換を適用するsimultanesouly

Question

私は、カーソルの位置に基づいて左右のトランスフォームを使用して画像を調整するスクリプトを作成しています。
ホバー上の画像をズームする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; 
 

 
}); 
 

 
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は、それがホバーにズームすることです。私はこれが問題だと思う。

CSSからトランスフォームを削除すると、スクリプトはうまく動作しますが、ホバーをズームしてカーソルに合​​わせるためには、画像にtransition:8s allが必要です。

このS.Oは、2つのトランスフォームプロパティを持つことができますが、1行にする必要があることを通知しました。私はどのように私のJavascriptでそれを行うのですか？

---

jsFiddle

Answer 1

transform単一のプロパティであるので、あなたは、例えば、それの一部だけのためにCSSからターゲットにすることはできません、あなたは同じtransformプロパティに適用される2 transform-functionsに異なるCSS transition-durationを設定することはできません。

時間の経過とともに両方の変換関数の値を更新することで、すべてをjsで書き込むことができますが、ハードウェアの高速化の可能性があるため、単純な回避策があります。

最も簡単な解決策は、ラッパー要素にscaleを適用し、内部要素を翻訳するように構造を少し変更することです。

このようにして、両方の変換が内部<img>に適用されますが、それらは互いに競合しません。

// 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>