翻轉/鏡像圖像水平+垂直與css

我試圖翻轉圖像以顯示它4種方式：原始（無變化），水平翻轉，垂直翻轉，翻轉水平+垂直。翻轉/鏡像圖像水平+垂直與css

要做到這一點我做下面，它工作得很好，除了翻轉水平+垂直，任何想法，爲什麼這wouldnt工作？

伊夫這裏提出這個問題的JS提琴：https://jsfiddle.net/7vg2tn83/

.img-hor { 
     -moz-transform: scaleX(-1); 
     -o-transform: scaleX(-1); 
     -webkit-transform: scaleX(-1); 
     transform: scaleX(-1); 
     filter: FlipH; 
     -ms-filter: "FlipH"; 
} 

.img-vert { 
     -moz-transform: scaleY(-1); 
     -o-transform: scaleY(-1); 
     -webkit-transform: scaleY(-1); 
     transform: scaleY(-1); 
     filter: FlipV; 
     -ms-filter: "FlipV"; 
} 

.img-hor-vert { 
     -moz-transform: scaleX(-1); 
     -o-transform: scaleX(-1); 
     -webkit-transform: scaleX(-1); 
     transform: scaleX(-1); 
     filter: FlipH; 
     -ms-filter: "FlipH"; 

     -moz-transform: scaleY(-1); 
     -o-transform: scaleY(-1); 
     -webkit-transform: scaleY(-1); 
     transform: scaleY(-1); 
     filter: FlipV; 
     -ms-filter: "FlipV"; 
}

來源

2015-09-30 sam

試試這個：

.img-hor-vert { 
    -moz-transform: scale(-1, -1); 
    -o-transform: scale(-1, -1); 
    -webkit-transform: scale(-1, -1); 
    transform: scale(-1, -1); 
}

更新小提琴：https://jsfiddle.net/7vg2tn83/1/

，因爲你是壓倒一切在你的CSS的transform它不能正常工作了。所以，而不是做兩個，它只是做了最後一個。有點像如果你做了兩次background-color，它會覆蓋第一個。

來源

2015-09-30 21:16:10 pgruber

您可以將只有一個對任何選擇轉換規則。使用

.img-hor-vert { 
    -moz-transform: scaleX(-1) scaleY(-1); 
    -o-transform: scaleX(-1) scaleY(-1); 
    -webkit-transform: scaleX(-1) scaleY(-1); 
    transform: scaleX(-1) scaleY(-1); 
    filter: FlipH FlipV; 
    -ms-filter: "FlipH FlipV"; 
}

我不確定哪個IE可以接受多個過濾器。

來源

2015-09-30 21:14:20 Victor

感謝 - 我在IE9測試，你是正確的，似乎沒有工作 – sam

對於IE9，你可以使用'-ms-transform：scale（-1，-1）;' – Victor

您可以爲水平+垂直翻轉做。

來源

2015-09-30 21:20:54

要執行的反射就可以使用，與旋轉（）CSS功能以這種格式變換CSS屬性沿着：

transform: rotateX() rotateY();

函數rotateX（）將旋轉沿x軸的元件和rotateY（）函數將沿着y軸旋轉一個元素。我發現我的方法直觀，可以在思想上形象化旋轉。在你的榜樣，用我的辦法解決辦法是：

.img-hor { 
    transform: rotateY(180deg); // Rotate 180 degrees along the y-axis 
} 

.img-vert { 
    transform: rotateX(180deg); // Rotate 180 degrees along the x-axis 
} 

.img-hor-vert { 
    transform: rotateX(180deg) rotateY(180deg); // Rotate 180 degrees on both 
}

的JS小提琴演示解決方案是https://jsfiddle.net/n20196us/1/

來源

2017-08-06 19:31:30

翻轉/鏡像圖像水平+垂直與css

回答

相關問題