1
我正在設計和使用CSS轉換:縮放和轉換。它在Firefox中運行良好,但在Chrome,Safari和Opera中無法正常工作。這是一個圓形縮放效果,在這些瀏覽器中它會進入正方形。不知道發生了什麼,爲什麼它在Firefox中有效,但不是其他瀏覽器。CSS轉換出現問題:Chrome,Safari,Opera中的縮放或CSS轉換,但在Firefox中正常
這裏是我的CSS代碼:
.picCircle {
max-height: 200px;
max-width: 200px;
overflow: hidden;
margin: 0 auto;
border-radius: 50%;
}
/*GROW*/
.grow img {
transform: scale(1);
-webkit-transition: all .85s ease;
-moz-transition: all .85s ease;
-o-transition: all .85s ease;
-ms-transition: all .85s ease;
transition: all .85s ease;
}
.grow img:hover {
display: inline-block;
transform:scale(1.1);
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-ms-transform:scale(1.1);
-0-transform:scale(1.1);
}
這裏是相關的HTML:
<div class="grow picCircle"><a href="/guest-rooms.htm"><img class="img-responsive" style="margin-right: auto; margin-left: auto;" src="http://bnbwebsites.s3.amazonaws.com/5076/shutterstock_61226425_600x600.jpg" alt="" width="600" height="600" /></a></div>
<h2>Guest Rooms</h2>
<p>Graceful Bed & Breakfast Inn features six well-appointed bedrooms that are furnished with comfortable antiques.</p>
<a class="btn btn-white" style="letter-spacing: 1.2px; margin-top: 25px;" href="/guest-rooms.htm">Learn More</a></div>
鏈接至網站: http://newgracefulfullblue.mybnbwebsite.com/