rotateさせたp要素と画像を並べる

Question

添付画像のように、imgの横に縦書きにしたpを並べるにはどのようにしたらよいのでしょうか？
display:flex;を使うと、rotateが効きませんでした。

   <div class="zero">
     <p>BROUSE SOME FAVORITES</p>
     <a href=""><img src="img/Coffeebag.jpg"></a>     
    </div>

.zero > p {
  transform: rotate(-90deg);
}

Answer 1

        .zero { display: flex;}
        .zero > p {
        writing-mode: vertical-rl;
        transform: rotate( -180deg );
        }

この指定でレイアウトできると思います。

Comments

[dorachan1293]

ありがとうございます。
このCSSだと、添付画像と文字の向きが逆のようです。
sidewaysも試してみましたが、こちらだと横書きになってしまいます。。。

[toremy]

すみません、修正しましたので確認してみてください。

[dorachan1293]

できました！
ありがとうございます！