Question

我找到了一个很棒的小CSS动画，可以在悬停时旋转纯CSS书。问题是：它在左边对齐，但我想调整它，所以我可以让第二本书在右边对齐。如果你看一下我的演示，你会看到我差点管理它。我的屏幕右侧有第二本书的div。但是，我无法让这本书实际上将齐地对齐到其父div的右侧。

我设法设法让右侧书籍封面的div移动，使其与右侧完全对齐，但我无法设法制作书的书脊也随之移动，所以你可以在这里看到一个奇怪的空白：

你们其中一个人可以帮我弄清楚如何移动脊柱，使其与书的封面齐平，在右侧，不改变封面的大小，也不会将封面向左移动到脊柱？（我希望它能在页面的右侧对齐）

谢谢！

如果您想要使用代码来分叉/播放，请使用以下代码：http://codepen.io/ihatecoding/pen/BzJoJZ。

以下是摘录：

＆＃13;

H1{text-align:Center;
font-size:4vw}

H2{text-align:Center;
font-size:2vw}

.someTextDiv{
  width: 30%;
  float: left;

}

.bk-list {
    list-style: none;
    position: relative;
}

.bk-list li {
    position: relative;
    width: 26vw;
    box-sizing: border-box;
    float: left;
    z-index: 1;
    margin:  0 3vw .5vw 0;
    -webkit-perspective: 1800px;
    perspective: 1800px;

}

.bk-list li .rightBookList {
    width: 26vw !important;
    float: right;
    text-align:right;
      margin:  0 0 .5vw 3vw !important;   

}

.rightBookList li {
    float: right;
    backgroun-color: Pink;
    text-align:right;
}

.bk-info {
    position: relative;
    margin-top: 24vw;
}

.bk-info h3 {
    padding: 25px 0 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(0,0,0,0.3);
    font-size: 26px;
}

.bk-info h3 span:first-child {
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    padding-bottom: 5px;
    display: block;
    color: #777;
}

.bk-info p {
    line-height: 24px;
    color: #444;
    min-height: 160px;
}

.bk-list li .bk-book {
    position: absolute;
    width: 24vw;
    height: 18vw;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: -webkit-transform .5s;
    transition: transform .5s;
}

.bk-list li .rightBookDiv{
  right:0;
}

.bk-list li .bk-book .rightBookDiv{
 right:0 !important;

}

.bk-list li .bk-book.bk-bookdefault:hover {
    -webkit-transform: rotate3d(0,1,0,35deg);
    transform: rotate3d(0,1,0,35deg);
}

.bk-list li .bk-book > div,
.bk-list li .bk-front > div {
    display: block;
    position: absolute;

}

.bk-list li .bk-front {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-transition: -webkit-transform .5s;
    transition: transform .5s;
    -webkit-transform: translate3d(0,0,20px);
    transform: translate3d(0,0,20px);
    z-index: 10;

}

.bk-list li .bk-front > div {
    z-index: 1;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

/* front cover dimensions */
.bk-list li .bk-front,
.bk-list li .bk-front > div {
    width: 18vw;
    height: 24vw;
}

.bk-list li .bk-left,
.bk-list li .bk-right {
    width: 40px;
    left: -20px;
}

.bk-list li .bk-top,
.bk-list li .bk-bottom {
    width: 17vw;
    height: 40px;
    top: -15px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.bk-list li .bk-right {
    height: 23vw;
    top: 5px;
    -webkit-transform: rotate3d(0,1,0,90deg) translate3d(0,0,295px);
    -moz-transform: rotate3d(0,1,0,90deg) translate3d(0,0,295px);
    transform: rotate3d(0,1,0,90deg) translate3d(0,0,295px);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.bk-list li .bk-right .rightBookDiv {
float:right;} 

.bk-list li .bk-left {
    height: 24vw;
    -webkit-transform: rotate3d(0,1,0,-90deg);
    transform: rotate3d(0,1,0,-90deg);
}

.bk-list li .bk-left .rightBookDiv{
float:right;}

.bk-list li .bk-top {
    -webkit-transform: rotate3d(1,0,0,90deg);
    transform: rotate3d(1,0,0,90deg);
}

.bk-list li .bk-bottom {
    -webkit-transform: rotate3d(1,0,0,-90deg) translate3d(0,0,390px);
    transform: rotate3d(1,0,0,-90deg) translate3d(0,0,390px);
}

/* Transform classes */

/* Main colors and content */

.bk-list li .bk-right,
.bk-list li .bk-top,
.bk-list li .bk-bottom {
    background-color: #fff;
}

.bk-list li .bk-front > div {
    border-radius: 0 3px 3px 0;
    box-shadow: 
        inset 4px 0 10px rgba(0, 0, 0, 0.1);
}

.bk-list li .bk-front:after {
    content: '';
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: -1px;
    width: 1px;
}

.bk-list li .bk-cover:after,
.bk-list li .bk-back:after {
    content: '';
    position: absolute;
    top: 0;
    left: 10px;
    bottom: 0;
    width: 3px;
    background: rgba(0,0,0,0.06);
    box-shadow: 1px 0 3px rgba(255, 255, 255, 0.1);
}

.bk-left h2 {
    width: 24vw;
    height: 40px;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: rotate(90deg) translateY(-40px);
    transform: rotate(90deg) translateY(-40px);
}

.bk-content {
    position: absolute;
    top: 30px;
    left: 20px;
    bottom: 20px;
    right: 20px;
    padding: 30px;
    overflow: hidden;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
    cursor: default;
}

.bk-content-current {
    opacity: 1;
    pointer-events: auto;
}

.bk-content p {
    padding: 0 0 10px;
    -webkit-font-smoothing: antialiased;
    color: #000;
    font-size: 13px;
    line-height: 20px;
    text-align: justify;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Individual style & artwork */

/* Book 1 */
.book-1 .bk-front > div,
.book-1 .bk-back,
.book-1 .bk-left,
.book-1 .bk-front:after {
    background-color: #ff924a;
}

.book-1 .bk-cover {
    background-image: url("http://img12.deviantart.net/22f5/i/2008/208/9/b/edward_scissorhands_sketch_by_rowenhood12.jpg");
    background-size: 100% 100%; 
    background-repeat: no-repeat;
    /*background-position: 10px 40px;*/
}

.book-1 .bk-cover h2 {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 30px;
    background: rgba(255,255,255,0.2);
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.1);
}

.book-1 .bk-cover h2 span:first-child,
.book-1 .bk-left h2 span:first-child {
    text-transform: uppercase;
    font-weight: 400;
    font-size: 13px;
    padding-right: 20px;
}

.book-1 .bk-cover h2 span:first-child {
    display: block;
}

.book-1 .bk-cover h2 span:last-child,
.book-1 .bk-left h2 span:last-child {
    font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;
} 

.book-1 .bk-content p {
    font-family: Georgia, Times, "Times New Roman", serif;
}

.book-1 .bk-left h2 {
    color: #fff;
    font-size: 15px;
    line-height: 40px;
    padding-right: 10px;
    text-align: right;
}

/* Book 2 */

.book-2 .bk-front > div,
.book-2 .bk-left,
.book-2 .bk-front:after {
    background-color: #ff924a;
}
.book-2 .bk-cover {
  background-image: url("http://img12.deviantart.net/22f5/i/2008/208/9/b/edward_scissorhands_sketch_by_rowenhood12.jpg") !important;
    background-size: 100% 100%; 
    background-repeat: no-repeat;
}

.book-2 .bk-cover h2 {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 30px;
    background: rgba(255,255,255,0.2);
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.1);
}

.book-2 .bk-cover h2 span:first-child,
.book-2 .bk-left h2 span:first-child {
    text-transform: uppercase;
    font-weight: 400;
    font-size: 13px;
    padding-right: 20px;
}

.book-2 .bk-cover h2 span:first-child {
    display: block;
}

.book-2 .bk-left h2 {
    color: #fff;
    font-size: 15px;
    line-height: 40px;
    padding-right: 10px;
    text-align: right;
}

.book-2 .bk-back p {
    color: #fff;
    font-size: 13px;
    padding: 40px;
    text-align: center;
    font-weight: 700;
}

/* Fallbacks */

.no-csstransforms3d .bk-list li .bk-book > div,
.no-csstransforms3d .bk-list li .bk-book .bk-cover-back {
    display: none;
}

.no-csstransforms3d .bk-list li .bk-book > div.bk-front {
    display: block;
}

.no-csstransforms3d .bk-info button,
.no-js .bk-info button {
    display: none;
}

.rightBookDiv{text-align:right;}

/*media queries for featured books */

@media screen and (max-width:850px){

.bk-list li {
    position: relative;
    width: 90vw;
    box-sizing: border-box;
    float: left;
    z-index: 1;
    margin:  4vw 4vw 4vw 4vw;
    -webkit-perspective: 1800px;
    perspective: 1800px;

}

.bk-info {
    position: relative;
    margin-top: 80vw;
}

.bk-list li .bk-page {
    width: 56vw;
    height: 76vw;
}

/* front cover dimensions */
.bk-list li .bk-front,
.bk-list li .bk-back,
.bk-list li .bk-front > div {
    width: 60vw;
    height: 80vw;
}

.bk-list li .bk-top,
.bk-list li .bk-bottom {
    width: 58vw;
}

.bk-list li .bk-right {
    height: 58vw;
}

.bk-list li .bk-left {
    height: 80vw;

}

}

＆＃13;

<section id="booksAnc" class="areaSection scrollto">

      <h1><span>Featuring Animated Books</span></h1>
<div id = "booksPubDiv" class = "pubSub">

<ul id="bk-list" class="bk-list clearfix">
<li>
            <div class="bk-book book-1 bk-bookdefault">
              <div class="bk-front">
                <div class="bk-cover-back"></div>
                <div class="bk-cover">
                                  </div>
              </div>
              <div class="bk-back">
                <img src="images/1.png" alt="cat"/>
              </div>
              <div class="bk-right"></div>
              <div class="bk-left">
                              </div>
              <div class="bk-top"></div>
              <div class="bk-bottom"></div>
            </div>
            <div class="bk-info">
              <h3>
                <span>Author 1</span>
                <span>Book Title</span>
              </h3>
              <p>Info About Book</p>
            </div>
          </li>

</ul>

                       <div class="someTextDiv">

                                    <h2>Problem Right Justifying the Right Book</h2>

             <p>           
I am trying to get the book on the right pushed to the far right of the screen and to retain the animation.  If you look you'll see that upon hover the book on the right is messed up.  It's spine is not next to the rest of the book.</p>

               <p>
Cras scelerisque enim a odio ornare mollis. Cras rutrum arcu mi, eu eleifend orci bibendum ut. Morbi interdum commodo risus, in vestibulum purus tristique at. Duis lectus ex, pharetra eget nunc non, luctus tincidunt leo. Pellentesque fermentum enim sapien, at lacinia dolor sodales eu. Sed lacus tellus, elementum eu pharetra ut, convallis ut mi. Mauris quis fringilla risus, et gravida ex. Donec ut ante ullamcorper, pulvinar risus vitae, molestie ligula. Nam non porta velit, in pretium nibh. Donec lobortis leo eget libero porta pretium nec sit amet libero.

Aenean consectetur dui in scelerisque consectetur. Mauris convallis nisl eget erat tincidunt, tempus congue quam auctor. Morbi tincidunt ex eros, sit amet fringilla urna ullamcorper et. Ut vehicula eros tortor, vitae sodales ipsum egestas id. Nullam bibendum enim ligula, sit amet venenatis mi consectetur sed. Integer ligula arcu, vulputate id dapibus ac, venenatis at leo. Cras consectetur, mauris nec aliquam pretium, velit ipsum pretium mi, eget pellentesque lacus ante vehicula ante. Pellentesque mollis, eros nec finibus pulvinar, purus turpis varius orci, ut placerat purus enim vel lacus. Nunc at ligula pulvinar, molestie lectus a, auctor enim. Quisque eget purus vitae nisl interdum tristique. Duis hendrerit elit sit amet elit semper, sit amet molestie enim malesuada. Praesent eleifend vehicula ante sed gravida.

Praesent dui urna, condimentum vitae efficitur sit amet, dignissim vel lectus. Phasellus at nisi eleifend, accumsan felis id, venenatis nisi. Duis porttitor enim a sem aliquet, ac viverra erat malesuada. Donec feugiat metus ut commodo feugiat. Vestibulum faucibus, ligula at dignissim venenatis, enim elit ultrices leo, vitae malesuada justo massa vitae justo. Praesent est ex, euismod sed tristique aliquet, pretium in urna. Aliquam iaculis nec orci nec auctor. Ut aliquam arcu at dui tincidunt, id mattis nulla vulputate. Nunc vitae tempus ex, sed ultricies nunc.

Fusce interdum dignissi

                         </p>
</div>

<ul id="bk-list" class="bk-list rightBookList clearfix">

          <li>
            <div class="bk-book book-2 bk-bookdefault rightBookDiv">
              <div class="bk-front rightBookDiv">
                <div class="bk-cover-back rightBookDiv"></div>
                <div class="bk-cover rightBookDiv">
                  </div>
              </div>
              <div class="bk-back rightBookDiv">
                <img src="images/2.png" alt="cat"/>
              </div>
              <div class="bk-right rightBookDiv"></div>
              <div class="bk-left rightBookDiv ">

              </div>
              <div class="bk-top rightBookDiv"></div>
              <div class="bk-bottom"></div>
            </div>
            <div class="bk-info">

              <h3>
                <span>Author 2</span>
                <span>Title 2</span>
              </h3>
              <p>Please help me figure out how to get the book above to move to the right of the screen, and keep its spine with it</p>
            </div>
          </li>
        </ul>

</div>
</section>

＆＃13;

Answer 1

我改变了这个班级的宽度：

.bk-list li .bk-book {
  position: absolute;
  width: 18vw; // changed this style
  height: 18vw;
  -webkit-transform-style:

到18vw并且脊柱移动到位：eval

转换css 3d动画，使其正确（而不是左）对齐

1 个答案: