0

why the span dose'nt want to rotate

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>project B</title> <link rel="stylesheet" href="project B.css"> </head> <body> <header> <img src='someimg.jpeg'> <p>Follow Us <span style="transform:rotate(70deg);">^</span></p> <p>select year</p> <p>general information</p> </header> CSS header{z-index: 2; position: absolute; right: 0%; width: 100vw; height:48px;} header p{ display: inline; margin: 85px ; } header img{width:150px; float: right; height: 48px; background-color:azure;} #title{position: absolute; top: 20%; margin-left: 10px; color: aliceblue; z-index: 1;

29th Aug 2020, 12:54 PM
Youssef Ashraf
Youssef Ashraf - avatar
3 ответов
+ 3
The span isn't rotating because it uses display: inline. You didn't specify a display property for it and a span will default to inline. This should achieve the effect you want: <span style="display: inline-block;transform:rotate(70deg);">^</span> This tiny statement on CSS-tricks illustrates the above suggestion: https://css-tricks.com/when-do-you-use-inline-block/#transform-on-an-inline-element
29th Aug 2020, 1:51 PM
Josh Greig
Josh Greig - avatar
0
Thx buddy you're a life saver
29th Aug 2020, 2:03 PM
Youssef Ashraf
Youssef Ashraf - avatar
0
Lol😂 to make a drop down buddy😅
29th Aug 2020, 2:38 PM
Youssef Ashraf
Youssef Ashraf - avatar