Как перевернуть значок железа вертикально в CSS ⇐ CSS

[Anonymous]

Я использую компоненты Iron-icon для своего приложения Polymer 2 и хочу знать, как перевернуть эти значки по вертикали или по горизонтали? Я пробовал использовать атрибут Transform и его эквивалент для других браузеров, но у меня это не сработало. как показано ниже:

Код: Выделить всё

.my-icon-class {
color: #55555A;
margin-top: 10px;
width: 30px;
height: 50px;
transform: scale(-1);
}

Я даже пробовал атрибут «filter» в ICE:

Код: Выделить всё

.my-icon-class {
color: #55555A;
margin-top: 10px;
width: 30px;
height: 50px;
filter: FLipH;
}

И мой экземпляр значка выглядит так:

Код: Выделить всё

Оператор импорта выглядит следующим образом:

Код: Выделить всё

Вы можете найти фрагмент здесь ниже:

Код: Выделить всё

// Load webcomponents.js polyfill if browser doesn't support native Web Components.
var webComponentsSupported = (
'registerElement' in document
&& 'import' in document.createElement('link')
&& 'content' in document.createElement('template')
);

if (webComponentsSupported) {
// For native Imports, manually fire WebComponentsReady so user code
// can use the same code path for native and polyfill'd imports.
if (!window.HTMLImports) {
document.dispatchEvent(
new CustomEvent('WebComponentsReady', {bubbles: true})
);
}
} else {
// Load webcomponents.js polyfill
var script = document.createElement('script');
script.async = true;
script.src = 'https://cdn.rawgit.com/StartPolymer/cdn/1.8.1/components/webcomponentsjs/webcomponents-lite.min.js';
document.head.appendChild(script);
}

Код: Выделить всё

h1 {
font-size: 24px;
font-weight: 500;
line-height: 32px;
margin: 24px 0;
}

.my-icon-class {
color: #55555A;
margin-top: 10px;
width: 50px;
height: 70px;
}

body {
@apply(--layout-vertical);
@apply(--layout-center-center);
}


Polymer Icon to Flip
And I want to flip it vertically and/or horizontally, need only the css. Thanks


icon to flip



window.addEventListener('WebComponentsReady', function() {
// Async call needed here for IE11 compatibility.
Polymer.Base.async(function() {

});
});

< /code>
< /div>
< /div>
< /p>

Если необходимо больше информации, пожалуйста, спросите в комментариях. < / п>

Подробнее здесь: https://stackoverflow.com/questions/542 ... lly-in-css