v2.0 | The transform property overrides other values

Hi Nick,
Request to change from transform:rotate(42deg) scaleX(1) scaleY(1) property to rotate: 42deg property, because transform overrides custom settings for other values ??like translate and scale.

https://developer.mozilla.org/en-US/docs/Web/CSS/rotate

Thanks!

Edit: Same thing in the CSS file.

Instead of:

.wp-block-outermost-icon-block a, .wp-block-outermost-icon-block svg {
  height: 100%;
  transition: transform .1s ease-in-out;
  width: 100%
}

.wp-block-outermost-icon-block a:hover {
  transform: scale(1.1)
}

.wp-block-outermost-icon-block svg {
  transform: rotate(var(--outermost--icon-block--transform-rotate, 0deg)) scaleX(var(--outermost--icon-block--transform-scale-x, 1)) scaleY(var(--outermost--icon-block--transform-scale-y, 1))
}

This:

@media (prefers-reduced-motion: no-preference) {
  .wp-block-outermost-icon-block :is(a, svg) {
    transition-property: rotate, scale;
    transition-duration: .1s;
    transition-timing-function: ease-in-out;
  }
}

.wp-block-outermost-icon-block :is(a, svg) {
  height: 100%;
  width: 100%
}

.wp-block-outermost-icon-block :is(a:hover, a:focus) {
  scale: 1.1;
}

.wp-block-outermost-icon-block svg {
  rotate: var(--outermost--icon-block--transform-rotate, 0deg);
  scale: var(--outermost--icon-block--transform-scale-x, 1) var(--outermost--icon-block--transform-scale-y, 1);
}

• This topic was modified 4 months, 2 weeks ago by Gyurmey.