Menu
Is there a way to apply transform onto an element inserted with :before?
The following does not work, but I'm open to other solutions.
.itemclass:before {
content: "➨";
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}
401
This scaling transformation is characterized by a two-dimensional vector. Its coordinates define how much scaling is done in each direction. If both coordinates are equal, the scaling is uniform (isotropic) and the aspect ratio of the element is preserved (this is a homothetic transformation).
Definition and Usage. The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.
Definition and Usage The transform-origin property allows you to change the position of transformed elements. 2D transformations can change the x- and y-axis of an element. 3D transformations can also change the z-axis of an element. To better understand the transform-origin property, view a demo.
Transforms can't be applied to non-replaced inline elements. Add:
display:inline-block;
Demo
Side-note: Though this doesn't apply to this use case, absolute/fixed positioning would discard the need for a display property as these are automatically treated as display:block.
Also, check the definition of transformable element:
A transformable element is an element in the HTML namespace which is either a block-level or atomic inline-level element, or whose ‘
display’ property computes to ‘table-row’, ‘table-row-group’, ‘table-header-group’, ‘table-footer-group’, ‘table-cell’, or ‘table-caption’; or an element in the SVG namespace (see [SVG11]) which has the attributes ‘transform’, ‘patternTransform’ or ‘gradientTransform’.
71
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
