CODEWITHSUNDEEP
javascripthtmlcss
Shayan Kanwal
Shayan Kanwal

Reputation: 566

rotate each letter problem in CSS and JavaScript?

I am trying to create an animation like I have created an empty h1 element and filled it with span elements by using javascript (each span element contains an individual letter) and when I hover on span it's rotating (as desired) but in order to rotate span Element I have to give display:inline-block; to the span element but by doing this it removes space between the words. I searched it on the internet but didn't get the right answer. So any anyone tell me how do I rotate the text with proper spacing around each word?

Here is my code you can experiment by uncommenting the display:inline-block; in CSS

let a = document.querySelector("h1")
let txt = "Hello How are you"
let indletter = Array.from(txt)
//console.log(indletter)

for(let i = 0; i < indletter.length;i++){
  let span = document.createElement("span")
  span.innerText = indletter[i]
  a.appendChild(span)
}
body {
  background-color: #eee;
  text-align: center;
  margin-top: 100px;
  font-family:arial;
}

h1{
  font-size:0;
}
span{
  font-size:2rem;
/*   display:inline-block; */
  transition:.3s alternate;
  
  
}

span:hover{
  color:red;
  cursor:pointer;
  transform:rotate(45deg);
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1></h1>
</body>
</html>

Upvotes: 1

Views: 184

Answers (3)

C3roe
C3roe

Reputation: 96397

Since those spans contain only whitespace, they “collapse” when you make them inline-block. Simply adding white-space: pre; can already fix that.

(And you can add it to all of them, don’t need a special class for the space-spans - they all contain one character each only, so this has no negative effect.)

span{
  font-size:2rem;
  display:inline-block;
  white-space:pre;
  transition:.3s alternate;  
}

Upvotes: 2

Mr_Green
Mr_Green

Reputation: 41840

Use &nbsp; for space

let a = document.querySelector("h1")
let txt = "Hello I am SHAYAN"
let indletter = Array.from(txt)
//console.log(indletter)

for (let i = 0; i < indletter.length; i++) {
  let span = document.createElement("span")
  span.innerHTML = indletter[i] === ' ' ? '&nbsp;' : indletter[i];
  a.appendChild(span)
}
body {
  background-color: #eee;
  text-align: center;
  margin-top: 100px;
  font-family: arial;
}

h1 {
  font-size: 0;
}

span {
  font-size: 2rem;
  display: inline-block;
  transition: .3s alternate;
}

span:hover {
  color: red;
  cursor: pointer;
  transform: rotate(45deg);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1></h1>
</body>

</html>

Upvotes: 1

Kinglish
Kinglish

Reputation: 23664

You could just test to see if that letter was a space and apply a special class to it.

 if (indletter[i]==" ") span.classList.add('spacer');

and the css

.spacer{
  padding:0 5px;
}

Also I changed the transition easing to something it would understand and now the tweening works.

 transition:.3s ease-in-out;


let a = document.querySelector("h1")
let txt = "Hello How are you"
let indletter = Array.from(txt)
//console.log(indletter)

for(let i = 0; i < indletter.length;i++){
  let span = document.createElement("span")
  span.innerText = indletter[i]
  if (indletter[i]==" ") span.classList.add('spacer');
  a.appendChild(span)
}
body {
  background-color: #eee;
  text-align: center;
  margin-top: 100px;
  font-family:arial;
}

h1{
  font-size:0;
}
span{
  font-size:2rem;
  position:relative;
 display:inline-block; 
 transition:.3s ease-in-out;
}

.spacer{
padding:0 5px;
}

span:hover{
  color:red;
  cursor:pointer;
  transform:rotate(45deg);
  transition:.3s alternate;
   }
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1></h1>
</body>
</html>

Upvotes: 1

Related Questions