追加 css 样式以添加动态转换翻译

Question

我有一个包含大约 5 张图像的页面，所有图像都散布在页面上，具有不同的绝对位置和不同的大小。我的目标是使用 css 和悬停事件将图像平移到屏幕中央。

到目前为止，这是我的 css：

.bbimage{
z-index: 1;
-webkit-transition: -webkit-transform 0.8s ease;
-moz-transition: -moz-transform 0.8s ease;
transition: transform 0.8s ease;


.bbimage:hover{
position:absolute !important;
/*left:50% !important;
top:250px !important;   <-very jittery and choppy */
-ms-transform: scale(3) rotate(0deg)!important;
-webkit-transform: scale(3) rotate(0deg)!important;
transform: scale(3) rotate(0deg)!important;
z-index: 3;
cursor: pointer;
}
.bbplaceholder:hover + .bbimage{
position:absolute !important;
left:50% !important;
top:250px !important;
-ms-transform: scale(3) rotate(0deg) !important;
-webkit-transform: scale(3) rotate(0deg) !important;
transform: scale(3) rotate(0deg) !important;
z-index: 3;
cursor: pointer;
}

最初我使用的是简单的过渡，但我发现它们不稳定且不稳定，尤其是在 chrome 中。我最终切换到变换，这对缩放和旋转非常有用，但我遇到了两个问题。

第一个问题，transform:translate 指定了相对翻译，而不是绝对位置。第二个问题是潜在的可变屏幕尺寸。

我目前的攻击计划是使用 Jquery 附加 css 样式，以便指定计算的相对转换到 window 中心。

这是我的：

    <script>
$( document ).ready(function() {
$('.bbimage:hover').css('-webkit-transform','translate(500px, 500px)');

});
    </script>

这似乎没有做任何事情，我不确定我做错了什么。我对 css 真的很陌生，对 Jquery 也比较陌生。显然，这只是初步测试，看看我是否可以附加 CSS，我还没有计算 window 中心。

Answer 1

jquery .css 方法将在元素的样式属性上添加样式，这无法处理 :hover 事件。

这些应该在 css 样式表中动态添加才能工作。

见here how to add dynamic stylesheet in javascript

追加 css 样式以添加动态转换翻译

append css style to add dynamic transform translate

javascript

css

jquery

css-animations