Why Can't Inline Elements Be Transformed

Why can't inline elements be transformed?

As @Shikkediel mentioned, inline elements do not have strong boundary like block elements do. They don't influence the flow of the document in the same way, if at all, and are tightly bound to their neighboring text or elements. CSS transforms operate on the bounding box (which inline elements do technically have) in a way that wouldn't really make sense for inline elements.

Consider a <strong> within a <span> (or div). The bold text is defined only by the change in style, but can flow across multiple lines and does not have a predictable rectangular bounding area. If you were to apply a CSS rotation, where would it rotate from? How would it reflow, if at all, while rotating?

On the other hand, the containing <span> does have rectangular bounds, so finding the center and corners, rotating and scaling, are all predictable and well-defined.

As an example, take this fiddle. The background of the inline element is:

inline strong with background color

but the bounds shown by the editor are:

inline strong with debugger hightlight

You can clearly see that the background and the element's bounds do not match at all. Without clear bounds, transforms because difficult and not very useful.

CSS transform doesn't work on inline elements

Answered here in the official W3 specifications under transformable element:

an element whose layout is governed by the CSS box model 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’ [CSS21]

letters won't transform without `inline-block` property

It's because the default display of a span is inline, so it's not considered as a block.

Also, you can not use the transform property on an inline element, it should be used on a block or inline-block.

Why can't I translate element using transform: translateY()?

Transform doesn't work on inline elements.

.first {
display:inline-block;
transform: translateY(40px);
}

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

Why I can't scale hyper link

It's because the a element is inline by default.

CSS Transforms Module Level 1 - Terminology - Transformable Element

A transformable element is an element in one of these categories:

  • an element whose layout is governed by the CSS box model 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
  • an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, ‘patternTransform‘ or gradientTransform.

Transformations don't apply to strictly inline elements. You could change the display of the anchor element to inline-block and it should work as expected.

Example Here

.bgdf a {
display: inline-block;
}
.bgdf a:hover {
transform: scale(2);
}

Why can input elements be sized if they are inline elements?

An input element is inline-block by default, not inline.

On the other hand, an element such as a span, is inline by default.

The width/height of an inline-block element, such as input can be changed (example).

While an inline element, for instance, span, cannot be changed by default, as its dimensions are defined by the "rendered content within them". (example).

This [width] property does not apply to non-replaced inline elements. The content width of a non-replaced inline element's boxes is that of the rendered content within them (before any relative offset of children). Recall that inline boxes flow into line boxes. The width of line boxes is given by the their containing block, but may be shorted by the presence of floats. - W3 reference

Rotate inline elements with CSS

Start by simplifying your HTML markup:

<h1 class="deallogo">Deal<span>OR</span>No deal</h1>

Much more semantic, it is all one heading and there is no more <center> which is deprecated :)

Now apply the needed CSS properties for h1:

.deallogo {
background: linear-gradient(#685300, #E6B800);
border: black solid 1px;
display: block;
/* the default */
margin: 0 auto;
/* margin auto centers block elements that have a fixed width! */
width: 204px;
padding: 0 9px 0 10px;
/*Slight changes with width and padding values*/
}

and the span:

.deallogo span {   
color: white;
background: black;
border: black solid 1px;
width: 35px;
font-size: 0.7em;
/* Smaller font size to fit the height */
transform: rotate(270deg);
display: inline-block;
/* inline-block allows the element to have a height and width (and rotate) */
vertical-align: top;
/* a top margin is being used, so let's get it up there with vertical-align */
margin: 4px 0 0;
}

et voilà!

Screenshot

Have an example! (fixed link)

Some light reading:

  • The display property

inline-block - The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would)

CSS3 transform not working

This is merely an educated guess without seeing the rest of your HTML/CSS:

Have you applied display: block or display: inline-block to li a? If not, try it.

Otherwise, try applying the CSS3 transform rules to li instead.

transform not working on css hover element

Links are display:inline by default and so are not affected by transform.

Make the link display:inline-block.

.btn:link,.btn:visited {  text-transform: uppercase;  padding: 15px 40px;  text-decoration: none;  border-radius: 100px;  transition: all .2s;  display: inline-block;}
.btn-white { background-color: white; color: #777;}
.btn:hover { transform: translateY(-30px);}
.btn:active { transform: translateY(-10px);}
<div class="text-box">  <h1 class="primary-header">    <span class="heading-primary-main">Outdoors</span>    <span class="heading-primary-sub">is where life happens</span>  </h1>  <a href="#" class="btn btn-white">Discover Our Tours</a></div>


Related Topics



Leave a reply



Submit