[英]CSS3: How to rotate and scale an img at the same time?
我很困惑。 為什么不能同時使用縮放和旋轉? 我試過這個,但它不起作用:
.rotate-img{
-webkit-transform:scale(2,2);
-webkit-transform:rotate(90deg);
margin-left:20%;
margin-top:10%;
}
我試過 jQuery,但也不起作用:
<style>
.zoom{
-webkit-transform:scale(2,2);
margin-left:20%;
margin-top:10%;
}
</style>
<script>
$(document).ready(function(){
$("img").dblclick(function(){
$(this).addClass("zoom");
$(this).contextmenu(function(){
$(this).css("-webkit-transform","rotate(90deg)");
return false;
})
});
})
</script>
我怎么能縮放一個 img,當我點擊右鍵然后旋轉 90 度。
您可以使用帶有rotate(**deg)
值的transform
屬性使用 CSS 旋轉圖像
.rotate-img { -webkit-transform : rotate(90deg) scale(0.2); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform : rotate(90deg) scale(0.2); /* IE 9 */ transform : rotate(90deg) scale(0.2); /* Firefox 16+, IE 10+, Opera */ left : -200px; position: relative; }
<img class="rotate-img" src="https://appharbor.com/assets/images/stackoverflow-logo.png" />
在多行上應用transform
時,它就像任何其他 CSS 屬性一樣,它會被覆蓋,因此只使用最后一行,就像這樣:
.myclass {
top: 100px;
top: 400px;
}
只有最后一個適用,因此您需要將所有轉換放在一個transform
。
好吧,建立在 adeneo 的答案之上,其中包括所有能夠進行CSS 轉換的瀏覽器。
.rotate-img {
-webkit-transform: rotate(90deg) scale(2.2); /* Chrome 4+, Op 15+, Saf 3.1, iOS Saf 3.2+ */
-moz-transform: rotate(90deg) scale(2.2); /* Fx 3.5-15 */
-ms-transform: rotate(90deg) scale(2.2); /* IE 9 */
-o-transform: rotate(90deg) scale(2.2); /* Op 10.5-12 */
transform: rotate(90deg) scale(2.2); /* Fx 16+, IE 10+ */
margin: 10% 0 0 20%;
}
請參閱擴展JS Fiddle 。
你不需要單獨編寫代碼來使用旋轉和縮放你可以像這樣使用它:
變換:縮放(1.3)旋轉(7度);
您可以同時縮放和旋轉,但必須在同一行上進行,否則您會用新值覆蓋 prievius 值。
let htmlElement = document.getElementById("rotate-img"); let scaleX = -0.3; let scaleY = 0.2; let angle = 45 ; // NOTICE!! THE BACK-TICKS, not regular quotes. Will decode variables inside before printing. // Code for Safari htmlElement.style.WebkitTransform = `scale( ${scaleX}, ${scaleY} ) rotate( ${angle}deg )`; // Code for IE9 htmlElement.style.msTransform = `scale( ${scaleX}, ${scaleY} ) rotate( ${angle}deg )`; // Standard syntax htmlElement.style.transform = `scale( ${scaleX}, ${scaleY} ) rotate( ${angle}deg )`;
<img id="rotate-img" src="https://appharbor.com/assets/images/stackoverflow-logo.png" />
另請注意,該元素上任何已存在的樣式都將被覆蓋,除非您先將該樣式保存到(字符串)變量中並將新樣式添加(附加或連接)到該保存的變量中,然后將整個變量添加回html 元素。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.