我正在重建其他人的 CSS3 转换，以使其在 Safari、Chrome 和 Firefox 上运行。 In their version (将鼠标悬停在包图像上)，过渡在 Safari 中效果很好，但在其他两个中效果不佳:元素卡在“向上”位置。 In my version ，过渡在 FF 和 Chrome 中运行平稳，但在 Safari 中运行不平稳(而且它不旋转)。有任何想法吗？我的 CSS 在下面。
.package-down {
display: block;
position: relative;
height: 100%;
float: left;
width: 33.333%;
margin: 0 0 0 0;
transform: rotate(0deg) ;
-webkit-transition: margin .1s ease, transform .25s ease;
-moz-transition: margin .1s ease, transform .25s ease;
-o-transition: margin .1s ease, transform .25s ease;
transition: margin .1s ease, transform .25s ease;
}
.package-up {
display: block;
position: relative;
height: 100%;
float: left;
width: 33.333%;
margin: -50px 0 0 0;
transform: rotate(-2deg);
-webkit-transition: margin .1s ease, transform .25s ease-out;
-moz-transition: margin .1s ease, transform .25s ease-out;
-o-transition: margin .1s ease, transform .25s ease-out;
transition: margin .1s ease, transform .25s ease-out;
}
最佳答案
虽然我同意 jQuery 不是这个问题所必需的，但真正的问题似乎是浏览器前缀的使用不一致。
您需要在 .package-down 和 .package-up 上为 transform: rotate() 添加前缀。
还有这个:
-webkit-transition: margin .1s ease, transform .25s ease-out;
应该是这样的:
-webkit-transition: margin .1s ease, -webkit-transform .25s ease-out;
这将是对所有其他前缀过渡属性的类似调整。
$(function() {
$('.package-down').hover(function() {
$('.package-down').toggleClass('package-up');
});
});img {
margin: 0;
max-width: 100%;
}
.main-packages-wrapper {
position: relative;
width: 80%;
min-height: 575px;
display: block;
padding-top: 80px;
z-index: 1; }
.package.original {
margin-right: -15px;
margin-left: -15px;
z-index: 2; }
.package.original img {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.package-down {
display: block;
position: relative;
height: 100%;
float: left;
width: 33.333%;
margin: 0 0 0 0;
-webkit-transform: rotate(0deg) ;
-moz-transform: rotate(0deg) ;
-o-transform: rotate(0deg) ;
transform: rotate(0deg) ;
-webkit-transition: margin .1s ease, -webkit-transform .25s ease;
-moz-transition: margin .1s ease, -moz-transform .25s ease;
-o-transition: margin .1s ease, -o-transform .25s ease;
transition: margin .1s ease, transform .25s ease;
}
.package-up {
display: block;
position: relative;
height: 100%;
float: left;
width: 33.333%;
margin: -50px 0 0 0;
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
-webkit-transition: margin .1s ease, -webkit-transform .25s ease-out;
-moz-transition: margin .1s ease, -moz-transform .25s ease-out;
-o-transition: margin .1s ease, -o-transform .25s ease-out;
transition: margin .1s ease, transform .25s ease-out;
}
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<body>
<div class="primary-content">
<section class="main-packages-wrapper">
<div class="package-down multigrain">
<a href="#"><img src="http://www.batterworld.com/wp-content/themes/batterworld/images/package_multigrain.png"></a>
</div>
</section>
</div><!--END PRIMARY CONTENT-->关于javascript - safari 中的 css3 过渡不流畅，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30605092/