cssのtransform: rotateY(360deg);を反映させたいです！

pythonのflaskを使って簡単なwebアプリを作る練習をしています。

写真が三つそろったときにでてくる<p class="celebrate"></p>で、そのcssのtransform: rotateY(360deg);を反映させたいのですが、できていません。
下のコードの、
width: 300px;
padding: 10px 20px;
text-align: center;
font-weight: bold;
border:1px solid #999;
の部分は反映されています。

htmlのhead内に<style></style>でかいています。

ご教授いただけるとうれしいです（＞＜）

以下はコードです！
↓patinco.html

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>PATINCO-PAGE</title>
6    <!--bootstrapよみこみ-->
7    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
8    <!--css記述-->
9    <style>
10            .celebrate{width: 300px;
11                       padding: 10px 20px;
12                       text-align: center;
13                       font-weight: bold;
14                       border:1px solid #999;
15                       transform: rotateY(360deg);}
16            
17    </style>
18</head>
19<body class="bg-warning">
20
21<div class="container pt-5 mt-5 mb-3">
22   <div class="row">
23    <img src="{{ patinco1 }}" alt="left-img" class="col-4">
24    <img src="{{ patinco2 }}" alt="center-img" class="col-4">
25    <img src="{{ patinco3 }}" alt="right-img" class="col-4">
26</div>
27</div>
28
29{% if patinco1 == patinco2 and patinco2 == patinco3 %}
30<p class="bg-danger text-white celebrate">{{ a }}</p>
31<div class="mt-2 pt-5 text-center">
32    <form action="/index" class="mb-5"  method="POST">
33        <input type="submit" name="name" class="bg-white p-3"  value="スロットもういちど！">
34    </form>
35</div>
36{% else %}
37<div class="mt-5 pt-5 text-center">
38    <form action="/index" class="mt-5 mb-5"  method="POST">
39        <input type="submit" name="name" class="bg-white p-3"  value="もっかいまわす">
40    </form>
41</div>
42{% endif %}
43
44
45</body>
46</html>