How to Use CSS3 Transform on a Span

How can I use CSS3 transform on a span?

Explanation:

A  or a link (<a>) are inline elements and the transform property doesn't apply to inline elements.

Here is the list of transformable elements from the CSS Transforms Module Level 1.

Solution:

Set the display property of the span to inline-block or block. This will let you apply transforms to the span element.

It also works for other inline elements like <a> ... (see the list of inline elements on MDN).

Here is a demo with the  and link <a> elements :

h1 {
  background: teal;
  padding: .25em .5em;
  margin: 1em;
  transform: skew(-15deg);
}
h1 span,
h1 a {
  color: #fff;
  display: inline-block;  /* <- ADD THIS */
  transform: skew(15deg);
}

<h1><span>This is a span in a title</span></h1>
<h1><a href="#">This is a link in a title</a></h1>

CSS Transform element on span tag (along with display: inline-block) is forcing a line break

One approach to achieve this effect is to use javascript to apply a  to every individual character in your original  (which, in the working example below, I have renamed ).

This prevents your inline-block becoming so wide that the rest of the bibliography entry can only follow it by starting on a new line.

Working Example:

// GRAB EACH BOOK TITLE IN THE BIBLIOGRAPHY
const bookTitles = [... document.getElementsByClassName('title')];

// LOOP THROUGH THE BOOK TITLES
for (bookTitle of bookTitles) {

  // GRAB THE TEXT OF THE BOOK TITLE
  let bookTitleText = bookTitle.textContent;

  // TEMPORARILY REPLACE THE SPACES
  bookTitleText = bookTitleText.replace(/\s/g, '+')

  // BUILD AN ARRAY OF CHARACTERS FROM THE BOOK TITLE
  let bookTitleTextArray = bookTitleText.split('');

  // TRANSFORM EACH CHARACTER INTO A <span class="slant">
  bookTitleHTML = '<span class="slant">' + bookTitleTextArray.join('</span><span class="slant">') + '</span>';

  // REINTRODUCE THE SPACES
  bookTitleHTML = bookTitleHTML.replace(/<span class="slant">\+<\/span>/g, ' ');

  // INSERT THE NEW HTML INTO THE BOOK TITLE
  bookTitle.innerHTML = bookTitleHTML;
}

.slant {
  display: inline-block;
  transform: skew(-18deg); 
}

<ul>
  <li>Ripley, John W. (Ed.).1975. <em class="title">Those Dreadful Devil Wagons: Shawnee County’s Automobile Owners, Dealers and Manufacturers</em>, 1902-1912 (Shawnee County Historical Society Bulletin No. 49).</li>
  <li>Boyd, John/Toronto Star [Photographer]. (1900). Cars; trucks and horse-drawn wagons competed for space at fruit and vegetable whole. [Photograph], Retrieved May 6, 2020, from: <a href="https://www.gettyimages.com/detail/news-photo/cars-trucks-and-horse-drawn-wagons-competed-for-space-at-news-photo/502831383"
      target="_blank">https://www.gettyimages.com/detail/news-photo/cars-trucks-and-horse-drawn-wagons-competed-for-space-at-news-photo/502831383</a></li>
  <li>Daily Herald [Photographer]. Hospital X-ray, 1932 [Photograph], Retrieved May 6, 2020, from: <a href="https://www.gettyimages.com/detail/news-photo/hospital-x-ray-1932-a-photograph-of-staff-taking-an-x-ray-news-photo/102730396" target="_blank">https://www.gettyimages.com/detail/news-photo/hospital-x-ray-1932-a-photograph-of-staff-taking-an-x-ray-news-photo/102730396</a></li>
</ul>

Translate transition a span inside a div and section

As stated by this comment transforms work on elements with block level display.

So changing your code to this:

#cp:hover{
    transform: translateY(-2px);
    text-decoration: underline;
    color: rgb(155, 44, 175);
    display:  inline-block;
}

will solve your problem.

Make a span rotate on click using CSS transform property in JQuery .animate() plugin

As far as I know, basic animates can't animate non-numeric CSS properties. So i would suggest you giving .toggleClass JQuery Plugin so that it would be easy to use.

UPDATE : Here the numeric value i.e. 180for degree is causing the issue.

    $('#slide-trigger').on('click', function () {        $('#slide-nav > ul').slideToggle(400, function () {            $(this).toggleClass('showing');        });        $('#slide-trigger > span').toggleClass('transform-class');    });

#slide-nav {    position: fixed;    display: inline-block;    top: 100px;    left: 0;}
#slide-nav ul{    padding:0;    display:none;}
#slide-nav ul li {    position:relative;    width: 100%;    padding: 7px 20px;}
#slide-nav ul li a {    transition: all 0.3s;}
#slide-nav ul .active a {    color: rgba(0,0,0,.75);}
#slide-nav ul .active:before{        content: "";        width: 15px;        height: 1.5px;        background-color: black;        position: absolute;        top: 50%;        left: 0;}

#slide-trigger {    font-size: 1.4em;    cursor: pointer;    margin: 20px 0;}#slide-trigger span {    font-size: 0.8em;}
.transform-class{    display:inline-block;    transform:rotateX(180deg) !important;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><nav id="slide-nav">                <div id="slide-trigger">Click here <span>▼</span></div>                <ul>                    <li  class="active"><a href="#">Link1</a></li>                    <li><a href="#">Link2</a></li>                    <li><a href="#">Link3</a></li>                    <li><a href="#">Link4</a></li>                </ul>            </nav>

Transform not working on block span element

it works, just not noticeable on horizontal lines

.hamburger {  font-size: 500%;}
.hamburger:hover>span:nth-of-type(1) {  transform: rotateX(45deg);}
span:nth-of-type(1) {  background-color: green;  transition: 1s;}
span span {  display: inline-block;}

<a class="" href="">  <span class="hamburger">                    <span>1 -</span>    <span>2</span>    <span>3</span>  </span></a>

Using text-transform property inside a span tag inside an H1 tag

Appears to be working just fine. capitalize will capitalize the first letter of each word in the , which it is. If you want all caps then use uppercase.

h1 span {
    text-transform: uppercase;
}

text-transform CSS property.

transform rotate in CSS should not affect my span and paragraph tag

i have changed some css code, please check

.details-section{
  background-color: rgb(83, 83, 83);
  height: 200px;
}

.icon-container{
    width: 90px;
    height: 90px;
    position: relative;
  
}
.icon-container:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    transition: 0.5s ease;
    border: 2px solid #c49b63;
    }
.icon-container:hover:before {
    transform: rotate(135deg);
    background: #c49b63;
 }

.box i{
  font-size: 60px;
  color: black;
  margin-top: 13px;
  position: relative;
  /* transition: 0.5s ease; */
}

/* .icon-container:hover{
  transform: rotate(135deg);
  background-color: #c49b63;
} */

/* .icon-container:hover i{
  transform: rotate(-135deg);
} */

.counter-box {
  display: block;
  text-align: center;
  position:relative;
}
.counter {
  display: block;
  font-size: 32px;
  font-weight: 700;
  color: #666;
  line-height: 28px
}

.counter-box p {
  margin: 5px 0 0;
  padding: 0;
  color: #909090;
  font-size: 18px;
  font-weight: 500
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container-fluid details-section">
  <div class="row justify-content-center h-100">
   <div class="col-xl-2 my-auto box text-center">
     <div class="icon-container">
       <i class="fa fa-thumbs-o-up"></i>
       <div class="counter-box">
         <span class="counter">3275</span>
          <p>Registered Members</p>
        </div>
      </div>
  </div>
  <div class="col-xl-2 my-auto box text-center">
     <div class="icon-container">
       <i class="fa fa-check"></i>
      </div>
  </div>
  <div class="col-xl-2 my-auto box text-center">
     <div class="icon-container">
       <i class="fa fa-shopping-cart"></i>
      </div>
  </div>
  </div>
</div>