cssを使い文字を移動させたい

Question

この立体的にした文字を-90degした状態で
このままの文字の３D感で表示したいのですが
どのようにしたらいいかわかりますか？

私は
文字の移動はtop と right の部分からしか
いじることができず、
degを使い文字を傾け、いどうさせると
文字が３Dに見えなくなったため
ここで助言を乞うことにしました。

よろしくお願いします。

html
<span class="text">hello</span>

css
body {
background-color: #c4c4c4;

}

.text {
position: absolute;
top: 50%;
right: 50%;
transform: translate(50%,-50%);
text-transform: uppercase;
font-family: verdana;
font-size: 12em;
font-weight: 700;
color: #f5f5f5;
text-shadow: 1px 1px 1px #919191,
1px 2px 1px #919191,
1px 3px 1px #919191,
1px 4px 1px #919191,
1px 5px 1px #919191,
1px 6px 1px #919191,
1px 7px 1px #919191,
1px 8px 1px #919191,
1px 9px 1px #919191,
1px 10px 1px #919191,
1px 18px 6px rgba(16,16,16,0.4),
1px 22px 10px rgba(16,16,16,0.2),
1px 25px 35px rgba(16,16,16,0.2),
1px 30px 60px rgba(16,16,16,0.4);
}

Comments

[Lhankor_Mhy]

「-90degした状態」のコードをご提示いただけますか？

Answer 1

こういうことでしょうか？

• デモ - JSFiddle

.text {
  position: absolute;
  top: 50%; 
  right: 50%;
  transform: translate(50%,-50%);
  text-transform: uppercase;
  font-family: verdana;
  font-size: 12em;
  font-weight: 700;
  color: #f5f5f5;
  text-shadow: rgb(145 145 145) -1px -1px 1px, rgb(145 145 145) -2px -1px 1px, rgb(145 145 145) -3px -1px 1px, rgb(145 145 145) -4px -1px 1px, rgb(145 145 145) -5px -1px 1px, rgb(145 145 145) -6px -1px 1px, rgb(145 145 145) -7px -1px 1px, rgb(145 145 145) -8px -1px 1px, rgb(145 145 145) -9px -1px 1px, rgb(145 145 145) -10px -1px 1px, rgb(16 16 16 / 40%) -18px -1px 6px, rgb(16 16 16 / 20%) -22px -1px 10px, rgb(16 16 16 / 20%) -25px -1px 35px, rgb(16 16 16 / 40%) -30px -1px 60px;
}

Answer 2

  transform: translate(50%,-50%);

上記を下記に修正ということではないのでしょうか。

  transform: translate(50%,-50%)  rotate(-90deg);

もし、違うならどこが想定と違いますか。