0
私は本の左側に.book-sideのクラスで別の赤いdivを追加して、私の本をより3dに見せようとしています。トランスフォームで90度回転させ、視点を変えてよりボクのように見せます。私はこれをして、本の辺縁が本の高さを少し越えていたことに気づいた。これは、私が変換原点を残していたからだと思っていたので、それはy軸上で本の方向に回転していて、それを形成していませんでした。変換原点を右に変更してこれを修正しようとすると、.book-sideが画面全体の途中でジャンプします。回転させて上端を0に設定すると、上端の中央に終わりますその親の最前列のフロント。私はまた、負の数を使用して、それを親のトップエデルと整列させる必要があります。普通は単にトップを0に設定するだけで何ができるのですか。なぜこの奇妙な振る舞いをしますか？トランスフォームの原点を右に変更すると、このdivが画面上をジャンプするのはなぜですか？
htmlはjsfiddleの中にあります。本の脊柱の底に向かって見ると、ブックの本がちょっと過去になることがわかります。 https://jsfiddle.net/ouwrhpwy/2/
.front-of-book-front,
.back-of-book-front,
.book-front,
.book-back,
.book{
width: 100px;
height: 160px;
position: relative;
perspective: 1000px;
}
.book{
margin: 52px auto;
transition: transform 1s ease-in-out 0s;
}
.book-front{
position: relative;
transform-style: preserve-3d;
transform-origin: left;
transition: transform 1s ease-in-out 0s;
box-shadow: 0px 3px 5px 2px rgba(0,0,0,.5);
}
.front-of-book-front{
background-image: url("images/mainCover.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: 47%;
backface-visibility: hidden;
perspective: 300px;
perspective-origin: -150px;
}
.front-of-book-front:before{
content: "Seraph Chronicles: Evangelion";
text-shadow: 2px 2px 1px rgba(0,0,0,.5);
font-size: .5em;
line-height: 15px;
color: white;
width: 119px;
height: 15px;
background-color: rgba(255,165,0,.5);
position: absolute;
text-align: center;
transform: translate(8px,93px) rotate(90deg);
}
.front-of-book-front:after{
content: "";
width: 75px;
height: 12px;
background-color: rgba(255,165,0,.5);
position: absolute;
transform: translate(0px,19px);
}
.bar{
width: 80px;
height: 8px;
background-color: rgba(0,0,0,.8);
font-size: .3em;
color: white;
text-align: right;
transform: rotate(90deg) translate(36px,-45px);
}
.bar p{
padding: 2px 3px 0 0 ;
display: block;
}
.back-of-book-front{
backface-visibility: hidden;
background-color: rgb(240,234,214);
transform: rotateY(180deg);
position: absolute;
top: 0;
}
.book-front:hover{
transform: rotatey(-180deg);
}
.book:hover{
transform: rotate(10deg);
}
.book-back{
position: absolute;
top:0;
background-color: rgb(240,234,214);
z-index: -1;
box-shadow: 3px 3px 5px 0 rgba(0,0,0,.5);
text-align: justify;
}
.book-side{
width: 160px;
height: 10px;
background-color: red;hsl(1,0%,45%);
position: absolute;
left: -2px;//why the negative numbers?
top:-5px;//why cant I simply just set it to 0?
transform: rotate(90deg) rotateX(90deg);
transform-origin: left;//when set to right it jump half way across the srceen
font-size: .5em;
color: white;
text-align: center;
}
.book-side p{
margin: 0;
padding:0;
}
.book-back p{
font-size: .1em;
margin: 2.5em 1.5em;
}