codepenによるcssサンプルについてタブレットの縦方向で下半分が表示される原因

Question

前提・実現したいこと

CSS初心者です。
下記URLのcodepenによるサンプル「CSS のみでページを開くときのオープニングシャッターアニメーションを表現してみる」を実際サーバーにアップして試したところ、パソコンとタブレットの横向きでは問題なくサンプル通り表現されますが、タブレットの縦向きではメインのページコンテンツが上半分はシャッターにて非表示にはなりますが、下半分が背面に移動せず表示されたままです。完全に全体が非表示にするコードを教えてください。

ページが下から起き上がる感じですが、実際はタブレットのように縦向きにするとページの中心部分から中折れしているので下半分が－15度手前に表示された状態です。下記のコード部分を変更してみたのですがだめでした。
transform: perspective(800px) scale(0.9) rotateX(15deg)
他の動作には問題は有りません。
宜しくお願いします。
https://digipress.info/tech/opening-loading-shutter-with-pure-css/

テキストエディタ　Dreamweaver CS6
ブラウザ　Chrome
タブレット　Ipad

該当のソースコード

body {
background-color: #fafafa;
color: #333;
text-align: center;
}

.shutter {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #1e1e1e;
z-index: 9999;
-webkit-animation: byeShutter 2.6s forwards;
animation: byeShutter 2.6s forwards;
}
.shutter::before, .shutter::after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
margin: auto;
}
.shutter::before {
background-color: #b5a58b;
width: 0;
height: 1px;
-webkit-animation: shutterOpen1 2.6s forwards;
animation: shutterOpen1 2.6s forwards;
}
.shutter::after {
width: 120%;
height: 0;
margin-left: -10%;
background-color: #f3f3f3;
-webkit-animation: shutterOpen2 2.6s forwards;
animation: shutterOpen2 2.6s forwards;
}

.content {
-webkit-animation: contentScale 2.6s forwards;
animation: contentScale 2.6s forwards;
}

@-webkit-keyframes byeShutter {
70% {
opacity: 1;
}
100% {
opacity: 0;
display: none;
z-index: -1;
}
}

@keyframes byeShutter {
70% {
opacity: 1;
}
100% {
opacity: 0;
display: none;
z-index: -1;
}
}
@-webkit-keyframes shutterOpen1 {
0% {
width: 0;
height: 1px;
}
50% {
width: 100%;
height: 1px;
}
90% {
width: 100%;
height: 100%;
}
100% {
width: 100%;
height: 100%;
}
}
@keyframes shutterOpen1 {
0% {
width: 0;
height: 1px;
}
50% {
width: 100%;
height: 1px;
}
90% {
width: 100%;
height: 100%;
}
100% {
width: 100%;
height: 100%;
}
}
@-webkit-keyframes shutterOpen2 {
60% {
width: 120%;
height: 0;
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
90% {
width: 120%;
height: 100%;
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
100% {
width: 120%;
height: 100%;
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
}
@keyframes shutterOpen2 {
60% {
width: 120%;
height: 0;
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
90% {
width: 120%;
height: 100%;
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
100% {
width: 120%;
height: 100%;
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
}
@-webkit-keyframes contentScale {
70% {
-webkit-transform: perspective(800px) scale(0.9) rotateX(15deg);
transform: perspective(800px) scale(0.9) rotateX(15deg);
}
100% {
-webkit-transform: perspective(800px) scale(1) rotateX(0);
transform: perspective(800px) scale(1) rotateX(0);
}
}
@keyframes contentScale {
70% {
-webkit-transform: perspective(800px) scale(0.9) rotateX(15deg);
transform: perspective(800px) scale(0.9) rotateX(15deg);
}
100% {
-webkit-transform: perspective(800px) scale(1) rotateX(0);
transform: perspective(800px) scale(1) rotateX(0);
}
}

試したこと

transform: bottom scale(0.9) rotateX(15deg);

Answer 1

@-webkit-keyframes contentScale {
0% {visibility:hidden;
}
40% {visibility:hidden;
}
70% {
-webkit-transform: perspective(800px) scale(0.9) rotateX(15deg);
transform: perspective(800px) scale(0.9) rotateX(15deg);
transform-origin: center bottom;
}
100% {
-webkit-transform: perspective(800px) scale(1) rotateX(0);
transform: perspective(800px) scale(1) rotateX(0);
}
}
@keyframes contentScale {
0% {visibility:hidden;
}
40% {visibility:hidden;
}

70% {
-webkit-transform: perspective(800px) scale(0.9) rotateX(15deg);
transform: perspective(800px) scale(0.9) rotateX(15deg);
transform-origin: center bottom;
}
100% {
-webkit-transform: perspective(800px) scale(1) rotateX(0);
transform: perspective(800px) scale(1) rotateX(0);
}
}
にしたところ、タブレットやスマホからは問題なく下から起き上がる様になりました。