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:
but the bounds shown by the editor are:
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à!
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
Is It Posible to Make an Input Checkbox a Bootstrap Glyphicon
Chrome Dev Tools Rgba/Hsl Conversion to Some New Format
How to Create Cube Window with CSS
Ie Flexible Box Model Not Working
Getting Div to Occupy Full Cell Height
Is There a Specific Order for CSS Properties
Example of Selector Grouping and Contextual Selector on CSS
Is Sizing Fonts Using "Em" Still Relevant
Bootstrap Fullscreen Layout with 100% Height
Ms Edge CSS Transition Flickering
Jquery UI Tooltip Custom Class on Page Load
CSS Div Id Used Only Once Per Page
Two Column Layout with One Having a Fixed Width in CSS