附加 css 样式以添加动态变换 translate答案

【问题标题】：append css style to add dynamic transform translate附加 css 样式以添加动态变换 translate
【发布时间】：2015-03-12 20:46:14
【问题描述】：

我有一个页面，其中包含大约 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 样式，以便指定计算出的相对于窗口中心的相对平移。

这是我所拥有的：

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

});
    </script>

这似乎没有做任何事情，我不确定我做错了什么。我对 css 很陌生，对 Jquery 也很陌生。很明显，这只是一个初步测试，看看我是否可以附加CSS，我还没有计算出窗口中心。

【问题讨论】：

哈！你给了我资源，正如我要求的那样。谢谢！
太棒了，添加它作为回答欢呼

标签： javascript jquery css css-animations

【解决方案1】：

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

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

见here how to add dynamic stylesheet in javascript

【讨论】：