Answered here in [the official W3 specifications][1] under [**transformable element**][2]:

&gt; an element whose layout is governed by the CSS box model which is
&gt; either a **block-level** or **atomic inline-level element**, or whose
&gt; ‘display’ property computes to ‘table-row’, ‘table-row-group’,
&gt; ‘table-header-group’, ‘table-footer-group’, ‘table-cell’, or
&gt; ‘table-caption’ [CSS21]


  [1]: https://drafts.csswg.org/css-transforms-1/
  [2]: https://drafts.csswg.org/css-transforms-1/#terminology

The updated version of [the specification][1] says:

&gt;A transformable element is an element in one of these categories:
&gt;
&gt;- all elements whose layout is governed by the CSS box model except for **non-replaced inline boxes**, table-column boxes, and table-column-group boxes [CSS2],
&gt;
&gt;- all SVG paint server elements, the clipPath element and SVG renderable elements with the exception of any descendant element of text content elements [SVG2].


We should note that not all the `inline` elements cannot be transformed but only the *non-replaced inline* elements thus the *replaced inline* elements can be transformed.

So basically we can apply transformation to `img`, `canvas`, etc without the need of making them `inline-block` or `block`

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    var all = document.querySelectorAll(&#39;.replaced&#39;);

    for(var i=0;i&lt;all.length;i++) {
     console.log(window.getComputedStyle(all[i],null).getPropertyValue(&quot;display&quot;));
    }

&lt;!-- language: lang-css --&gt;

    canvas {
      background:red;
    }

    .replaced {
      transform:rotate(20deg);
    }

&lt;!-- language: lang-html --&gt;

    &lt;img src=&quot;https://picsum.photos/200/200?image=1069&quot; class=&quot;replaced&quot;&gt;
    &lt;canvas class=&quot;replaced&quot;&gt;&lt;/canvas&gt;

&lt;!-- end snippet --&gt;

More details about replaced elements:

https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements

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

https://stackoverflow.com/q/12468176/8620333

  [1]: https://drafts.csswg.org/css-transforms/#transform-property

I have created an object array in JavaScript. How can I print the object array in the browser window, similar to `print_r` function in PHP?


    var lineChartData = [{
                date: new Date(2009, 10, 2),
                value: 5
            }, {
                date: new Date(2009, 10, 25),
                value: 30
            }, {
                date: new Date(2009, 10, 26),
                value: 72,
                customBullet: &quot;images/redstar.png&quot;
            }];



How to print object array in JavaScript?

I am trying to set up a view&#39;s layer properties via IB. Everything works except for color of the border (property `layer.borderColor`):

![enter image description here][1]

I remember running into this problem a year ago and I ended up doing it programatically. And still, I can do this programmatically, but I am curious why the `layer.borderColor`property never works via interface builder. I don&#39;t want to import `QuartzCore`, and then write extra line of code just because of this, seems like an overkill. 


  [1]: http://i.stack.imgur.com/97wu2.png

UIView&#39;s border color in Interface builder doesn&#39;t work?

I wanted to mirror letter `E` in the word `WEBLOG` so I used CSS transform property but it doesn&#39;t work if I wrap the text inside a span but it works if I assing `display: inline-block;` or `display: block;` 

**So transforms doesn&#39;t apply to inline elements?**

[**Example 1**][1] (Fails To Transform)

    &lt;h1&gt;W&lt;span&gt;E&lt;/span&gt;BLOG&lt;/h1&gt;

    h1 span {
        transform:rotate(7deg);
        -ms-transform:rotate(7deg); /* IE 9 */
        -moz-transform:rotate(7deg); /* Firefox */
        -webkit-transform:rotate(7deg); /* Safari and Chrome */
        -o-transform:rotate(7deg); /* Opera */
    }

[**Example 2**][2] (Works, If Used `display: block` OR `display: inline-block`)


  [1]: http://jsfiddle.net/4hwMm/
  [2]: http://jsfiddle.net/4hwMm/1/

CSS transform doesn&#39;t work on inline elements

I wanted to mirror letter <code>E</code> in the word <code>WEBLOG</code> so I used CSS transform property but it doesn't work if I wrap the text inside a span but it works if I assing <code>display: inline-block;</code> or <code>display: block;</code>
So transforms doesn't apply to inline elements?
<a href="http://jsfiddle.net/4hwMm/" target="_blank" rel="noopener noreferrer">Example 1</a> (Fails To Transform)
<pre><code class="hljs language-css">&#x3C;h1>W&#x3C;span>E&#x3C;/span>BLOG&#x3C;/h1>

h1 span {
 transform:rotate(7deg);
 -ms-transform:rotate(7deg); /* IE 9 */
 -moz-transform:rotate(7deg); /* Firefox */
 -webkit-transform:rotate(7deg); /* Safari and Chrome */
 -o-transform:rotate(7deg); /* Opera */
}
</code></pre>
<a href="http://jsfiddle.net/4hwMm/1/" target="_blank" rel="noopener noreferrer">Example 2</a> (Works, If Used <code>display: block</code> OR <code>display: inline-block</code>)

Can a div tag have two classes?

I am using twitter bootstrap, and there are two predefined classes that I would like to use.

One is an `active` class that I would like to use on a `dropdown-toggle` within a nav bar.

What is the best way of approaching this in the html, with out overriding the css.

Can a div have multiple classes (Twitter Bootstrap)

I want to style `code` elements that are not inside `a` tags.

What is the best approach to accomplish this?

`code:not(a code)` doesn&#39;t seem to work at all, at least on Chrome, even though it [seems like it should](https://developer.mozilla.org/en/docs/CSS/:not)

I can&#39;t get it to work from the console either.

Are there any other css-only approaches I could use for this?

CSS Selector for not a child of element type?

I have an HTML page from page builder, and it injects `style` attribute directly to the element. I found it&#39;s considered as `element.style`.

I want to override it using CSS. I can match the element, but it doesn&#39;t override it.

![screenshot][1]

  [1]: http://i.stack.imgur.com/PD1wt.png

How can I override the style using CSS?

Override element.style using CSS

Is there a way to detect if a handheld browser is used (iOS/Android phone/tablet)?

I tried this with the goal to make an element half as wide in a browser on a handheld device but it doesn&#39;t make a difference.

    width: 600px;
    @media handheld { width: 300px; }

Can it be done and if so how?

**edit:** From the referred page in jmaes&#39; answer I used

`@media only screen and (max-device-width: 480px)`.

Detect if a browser in a mobile device (iOS/Android phone/tablet) is used

I want to use a full-height app using flexbox. I found what I want using old flexbox layout module (`display: box;` and other things) in this link: https://stackoverflow.com/questions/9251447/css3-flexbox-full-height-app-and-overflow

This is a correct solution for browsers that only support the old version of the flexbox CSS properties.

If I want to try using the newer flexbox properties, I&#39;ll try to use the second solution in the same link listed as a hack: using a container with `height: 0px;`. It makes to show a vertical scroll.

I don&#39;t like it a lot because it introduces other problems and it is more a workaround than a solution.

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    html, body {
        height: 100%;    
    }
    #container {
    	display: flex;
    	flex-direction: column;
    	height: 100%;
    }
    #container article {
    	flex: 1 1 auto;
    	overflow-y: scroll;
    }
    #container header {
        background-color: gray;
    }
    #container footer {
        background-color: gray;
    }

&lt;!-- language: lang-html --&gt;

    &lt;section id=&quot;container&quot; &gt;
        &lt;header id=&quot;header&quot; &gt;This is a header&lt;/header&gt;
        &lt;article id=&quot;content&quot; &gt;
            This is the content that
            &lt;br /&gt;
            With a lot of lines.
            &lt;br /&gt;
            With a lot of lines.
            &lt;br /&gt;
            This is the content that
            &lt;br /&gt;
            With a lot of lines.
            &lt;br /&gt;
            &lt;br /&gt;
            This is the content that
            &lt;br /&gt;
            With a lot of lines.
            &lt;br /&gt;
            &lt;br /&gt;
            This is the content that
            &lt;br /&gt;
            With a lot of lines.
            &lt;br /&gt;
        &lt;/article&gt;
        &lt;footer id=&quot;footer&quot; &gt;This is a footer&lt;/footer&gt;
    &lt;/section&gt;

&lt;!-- end snippet --&gt;

I have prepared a JSFiddle as well with a base example: http://jsfiddle.net/ch7n6/

It is a full-height HTML website and the footer is at the bottom because of the flexbox properties of the content element. I suggest you move the bar between CSS code and result to simulate different height.

How can I combine flexbox and vertical scroll in a full-height app?

I have a situation where, in normal CSS circumstances, a fixed div would be positioned exactly where it is specified (`top:0px`, `left:0px`). 

This does not seem to be respected if I have a parent that has a translate3d transform. Am I not seeing something? I have tried other webkit-transform like style and transform origin options but had no luck.

I have attached a [JSFiddle][1] with an example where I would have expected the yellow box be at the top corner of the page rather than inside of the container element.

You can find below a simplified version of the fiddle:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    #outer {
        position:relative; 
        -webkit-transform:translate3d(0px, 20px , 0px); 
        height: 300px; 
        border: 1px solid #5511FF; 
        padding: 10px;
        background: rgba(100,180,250, .8); 
        width: 80%;
    }
    #middle{
        position:relative; 
        border: 1px dotted #445511; 
        height: 300px; 
        padding: 5px;
        background: rgba(250,10,255, .6);
    }
    #inner {
        position: fixed; 
        top: 0px;
        box-shadow: 3px 3px 3px #333; 
        height: 20px; 
        left: 0px;
        background: rgba(200,180,80, .8); 
        margin: 5px; 
        padding: 5px;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;container&quot;&gt;
        Blue: Outer, &lt;br&gt;
        Purple: Middle&lt;br&gt;
        Yellow: Inner&lt;br&gt;
        &lt;div id=&quot;outer&quot;&gt; 
            &lt;div id=&quot;middle&quot;&gt;
                &lt;div id=&quot;inner&quot;&gt;
                    Inner block
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

How can I make translate3d work with fixed-positioned children?


  [1]: http://jsfiddle.net/GMX5H/1/

&#39;transform3d&#39; not working with position: fixed children

How to combine `rotateX(50deg) rotateY(20deg) rotateZ(15deg)` in shorthand `rotate3d()`?

rotate3d shorthand

Let&#39;s say I have a couple of columns, of which some I&#39;d like to rotate the values of:

http://jsfiddle.net/MTyFP/1/

    &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;statusColumn&quot;&gt;&lt;span&gt;Normal&lt;/span&gt;&lt;/div&gt;
        &lt;div class=&quot;statusColumn&quot;&gt;&lt;a&gt;Normal&lt;/a&gt;&lt;/div&gt;
        &lt;div class=&quot;statusColumn&quot;&gt;&lt;b&gt;Rotated&lt;/b&gt;&lt;/div&gt;
        &lt;div class=&quot;statusColumn&quot;&gt;&lt;abbr&gt;Normal&lt;/abbr&gt;&lt;/div&gt;
    &lt;/div&gt;

With this CSS:

    .statusColumn b {
      writing-mode: tb-rl;
      white-space: nowrap;
      display: inline-block;
      overflow: visible;
      transform: rotate(-90deg);
      transform-origin: 50% 50%;
    }

It ends up looking like this:

![A series of four block-level elements. The third element&#39;s text is rotated.][1]

Is it possible to write any CSS that will cause the rotated element to affect its parent&#39;s height, such that the text would not overlap the other elements? Something like this:

![The third column&#39;s text now affects its parent box&#39;s height such that the text fits within the box.][2]


  [1]: http://i.stack.imgur.com/gIK5E.png
  [2]: http://i.stack.imgur.com/d82jr.jpg

Rotated elements in CSS that affect their parent&#39;s height correctly

I&#39;m having some problems rotating and positioning a line of text. Now it&#39;s just position that works. The rotation also works, but only if I disable the positioning.

CSS:


    #rotatedtext {
        transform-origin: left;
        transform: rotate(90deg);
        transform: translate(50%, 50%);
    }

The html is just plain text.

Rotate and translate

We now all know, particularly from [that nice article](http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/), that we should prefer css-transforms to animate position.

But we got the choice between `translate()` and `translate3d()`...

Which one is *generally* faster?

Content Type	Original Author	Original Content on Stackoverflow
Question	Mr. Alien	View Question on Stackoverflow
Solution 1 - Css	Giacomo1968	View Answer on Stackoverflow
Solution 2 - Css	Temani Afif	View Answer on Stackoverflow

CSS transform doesn't work on inline elements

Css Problem Overview

Css Solutions

Solution 1 - Css

Solution 2 - Css

UIView's border color in Interface builder doesn't work?

How to print object array in JavaScript?

Attributions