CSS: Поместите картинку на другую страницу

Я работаю над складным проектом (например, сгибанием флаера). Я складываю изображение, но когда показана спина, я хочу, чтобы он показывал другое изображение.CSS: Поместите картинку на другую страницу

Вот код, с помощью только одного изображения:

<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
    <title>Double Gate Fold</title> 
 
    <style> 
 
     .view { 
 
      width: 1024px; 
 
      height: 612px; 
 
      margin: 10px; 
 
      position: relative; 
 
      top: 100px; 
 
      -webkit-perspective: 1000px; 
 
      -moz-perspective: 1000px; 
 
      -o-perspective: 1000px; 
 
      -ms-perspective: 1000px; 
 
      perspective: 1000px; 
 
     } 
 

 
      .view .slice { 
 
       width: 256px; 
 
       height: 100%; 
 
       z-index: 100; 
 
       -webkit-transform-style: preserve-3d; 
 
       -moz-transform-style: preserve-3d; 
 
       -o-transform-style: preserve-3d; 
 
       -ms-transform-style: preserve-3d; 
 
       transform-style: preserve-3d; 
 
       -webkit-transform-origin: left center; 
 
       -moz-transform-origin: left center; 
 
       -o-transform-origin: left center; 
 
       -ms-transform-origin: left center; 
 
       transform-origin: left center; 
 
       -webkit-transition: -webkit-transform 1s ease-in-out; 
 
       -moz-transition: -moz-transform 1s ease-in-out; 
 
       -o-transition: -o-transform 1s ease-in-out; 
 
       -ms-transition: -ms-transform 1s ease-in-out; 
 
       transition: transform 1s ease-in-out; 
 
       -webkit-backface-visibility: visible; 
 
       -moz-backface-visibility: visible; 
 
       -o-backface-visibility: visible; 
 
       -ms-backface-visibility: visible; 
 
       backface-visibility: visible; 
 
      } 
 

 
      .view .s2, 
 
      .view .s3, .view .s4 { 
 
       -webkit-transform: translate3d(256px,0,0); 
 
       -moz-transform: translate3d(256px,0,0); 
 
       -o-transform: translate3d(256px,0,0); 
 
       -ms-transform: translate3d(256px,0,0); 
 
       transform: translate3d(256px,0,0); 
 
      } 
 

 
      .view .s1 { 
 
       background-position: 0px 0px; 
 
      } 
 

 
      .view .s2 { 
 
       background-position: -256px 0px; 
 
      } 
 

 
      .view .s3 { 
 
       background-position: -512px 0px; 
 
      } 
 

 
      .view .s4 { 
 
       background-position: -768px 0px; 
 
      } 
 

 
      .view:hover .s1 { 
 
       -webkit-transform: translate3d(256px,0,0) rotate3d(0,1,0,130deg); 
 
       /*-moz-transform: translate3d(256px,0,0) rotate3d(0,1,0,90deg); 
 
       -o-transform: translate3d(256px,0,0) rotate3d(0,1,0,90deg); 
 
       -ms-transform: translate3d(256px,0,0) rotate3d(0,1,0,90deg); 
 
       transform: translate3d(256px,0,0) rotate3d(0,1,0,90deg);*/ 
 
      } 
 

 
      .view:hover .s2 { 
 
       -webkit-transform: translate3d(256px,0,0) rotate3d(0,1,0,-60deg); 
 
       /*-moz-transform: translate3d(256px,0,0) rotate3d(0,1,0,-90deg); 
 
       -o-transform: translate3d(256px,0,0) rotate3d(0,1,0,-90deg); 
 
       -ms-transform: translate3d(256px,0,0) rotate3d(0,1,0,-90deg); 
 
       transform: translate3d(256px,0,0) rotate3d(0,1,0,-90deg);*/ 
 
      } 
 

 
      .view:hover .s3 { 
 
       -webkit-transform: translate3d(256px,0,0) rotate3d(0,1,0,-60deg); 
 
       /*-moz-transform: translate3d(256px,0,0) rotate3d(0,1,0,-90deg); 
 
       -o-transform: translate3d(256px,0,0) rotate3d(0,1,0,-90deg); 
 
       -ms-transform: translate3d(256px,0,0) rotate3d(0,1,0,-90deg); 
 
       transform: translate3d(256px,0,0) rotate3d(0,1,0,-90deg);*/ 
 
      } 
 

 
      .view:hover .s4 { 
 
       -webkit-transform: translate3d(256px,0,0) rotate3d(0,1,0,-110deg); 
 
       /*-moz-transform: translate3d(256px,0,0) rotate3d(0,1,0,-90deg); 
 
       -o-transform: translate3d(256px,0,0) rotate3d(0,1,0,-90deg); 
 
       -ms-transform: translate3d(256px,0,0) rotate3d(0,1,0,-90deg); 
 
       transform: translate3d(256px,0,0) rotate3d(0,1,0,-90deg);*/ 
 
      } 
 
    </style> 
 
</head> 
 
<body> 
 
    <div class="view"> 
 
     <div class="slice s1" style="background-image: url(http://img01.deviantart.net/ec30/i/2011/178/e/b/the_majestic_grey_wolf_by_picturebypali-d3k5dxp.jpg); "> 
 
      <div class="slice s2" style="background-image: url(http://img01.deviantart.net/ec30/i/2011/178/e/b/the_majestic_grey_wolf_by_picturebypali-d3k5dxp.jpg); "> 
 
       <div class="slice s3" style="background-image: url(http://img01.deviantart.net/ec30/i/2011/178/e/b/the_majestic_grey_wolf_by_picturebypali-d3k5dxp.jpg); "> 
 
        <div class="slice s4" style="background-image: url(http://img01.deviantart.net/ec30/i/2011/178/e/b/the_majestic_grey_wolf_by_picturebypali-d3k5dxp.jpg);"> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

Я с нетерпением жду ваших ответов :)

источник

2015-07-10 Pikachuu

ОК, и что вы пробовали до сих пор? :) –

Я попытался сделать еще один набор div, но с другим фрагментом, а затем просто скопируйте и вставьте код для других фрагментов. Но он не работает каждый раз – Pikachuu

«Но он не работает каждый раз», но иногда работает? добавьте jsfiddle, чтобы показать, что у вас есть. – atmd

Вероятно, есть более простые решения, но я достиг этого с псевдоэлементами.

Как это:

.view { 
 
    width: 1024px; 
 
    height: 612px; 
 
    margin: 10px; 
 
    position: relative; 
 
    top: 100px; 
 
    -webkit-perspective: 1000px; 
 
    -moz-perspective: 1000px; 
 
    -o-perspective: 1000px; 
 
    -ms-perspective: 1000px; 
 
    perspective: 1000px; 
 
} 
 
.view .slice { 
 
    width: 256px; 
 
    height: 100%; 
 
    z-index: 100; 
 
    -webkit-transform-style: preserve-3d; 
 
    -moz-transform-style: preserve-3d; 
 
    -o-transform-style: preserve-3d; 
 
    -ms-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
    -webkit-transform-origin: left center; 
 
    -moz-transform-origin: left center; 
 
    -o-transform-origin: left center; 
 
    -ms-transform-origin: left center; 
 
    transform-origin: left center; 
 
    -webkit-transition: -webkit-transform 1s ease-in-out; 
 
    -moz-transition: -moz-transform 1s ease-in-out; 
 
    -o-transition: -o-transform 1s ease-in-out; 
 
    -ms-transition: -ms-transform 1s ease-in-out; 
 
    transition: transform 1s ease-in-out; 
 
    -webkit-backface-visibility: visible; 
 
    -moz-backface-visibility: visible; 
 
    -o-backface-visibility: visible; 
 
    -ms-backface-visibility: visible; 
 
    backface-visibility: visible; 
 
} 
 
.view .s2, .view .s3, .view .s4 { 
 
    -webkit-transform: translate3d(256px, 0, 0); 
 
    -moz-transform: translate3d(256px, 0, 0); 
 
    -o-transform: translate3d(256px, 0, 0); 
 
    -ms-transform: translate3d(256px, 0, 0); 
 
    transform: translate3d(256px, 0, 0); 
 
} 
 
.view .s1 { 
 
    background-position: 0px 0px; 
 
} 
 
.view .s2 { 
 
    background-position: -256px 0px; 
 
} 
 
.view .s3 { 
 
    background-position: -512px 0px; 
 
} 
 
.view .s4 { 
 
    background-position: -768px 0px; 
 
} 
 
.view:hover .s1 { 
 
    -webkit-transform: translate3d(256px, 0, 0) rotate3d(0, 1, 0, 130deg); 
 
    /*-moz-transform: translate3d(256px,0,0) rotate3d(0,1,0,90deg); 
 
       -o-transform: translate3d(256px,0,0) rotate3d(0,1,0,90deg); 
 
       -ms-transform: translate3d(256px,0,0) rotate3d(0,1,0,90deg); 
 
       transform: translate3d(256px,0,0) rotate3d(0,1,0,90deg);*/ 
 
} 
 
.view:hover .s2 { 
 
    -webkit-transform: translate3d(256px, 0, 0) rotate3d(0, 1, 0, -60deg); 
 
    /*-moz-transform: translate3d(256px,0,0) rotate3d(0,1,0,-90deg); 
 
       -o-transform: translate3d(256px,0,0) rotate3d(0,1,0,-90deg); 
 
       -ms-transform: translate3d(256px,0,0) rotate3d(0,1,0,-90deg); 
 
       transform: translate3d(256px,0,0) rotate3d(0,1,0,-90deg);*/ 
 
} 
 
.view:hover .s3 { 
 
    -webkit-transform: translate3d(256px, 0, 0) rotate3d(0, 1, 0, -60deg); 
 
    /*-moz-transform: translate3d(256px,0,0) rotate3d(0,1,0,-90deg); 
 
       -o-transform: translate3d(256px,0,0) rotate3d(0,1,0,-90deg); 
 
       -ms-transform: translate3d(256px,0,0) rotate3d(0,1,0,-90deg); 
 
       transform: translate3d(256px,0,0) rotate3d(0,1,0,-90deg);*/ 
 
} 
 
.view:hover .s4 { 
 
    -webkit-transform: translate3d(256px, 0, 0) rotate3d(0, 1, 0, -110deg); 
 
    /*-moz-transform: translate3d(256px,0,0) rotate3d(0,1,0,-90deg); 
 
       -o-transform: translate3d(256px,0,0) rotate3d(0,1,0,-90deg); 
 
       -ms-transform: translate3d(256px,0,0) rotate3d(0,1,0,-90deg); 
 
       transform: translate3d(256px,0,0) rotate3d(0,1,0,-90deg);*/ 
 
} 
 

 
.view .s4:after { 
 
    position: absolute; 
 
    bottom: 0; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    content: ''; 
 
    display: block; 
 
    opacity: 0; 
 
    background: url('http://placehold.it/350x150'); 
 
    transition-delay: 0.3s; 
 
} 
 

 
.view:hover .s4:after { 
 
    opacity: 1; 
 
    transition-delay: 0.7s; 
 
} 
 
.view .s1:after { 
 
    position: absolute; 
 
    bottom: 0; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    content: ''; 
 
    display: block; 
 
    opacity: 0; 
 
    background: url('http://placehold.it/100x150'); 
 
    transition-delay: 0.3s; 
 
} 
 

 
.view:hover .s1:after { 
 
    opacity: 1; 
 
    transition-delay: 0.7s; 
 
}

<body> 
 
    <div class="view"> 
 
     <div class="slice s1" style="background-image: url(http://img01.deviantart.net/ec30/i/2011/178/e/b/the_majestic_grey_wolf_by_picturebypali-d3k5dxp.jpg); "> 
 
      <div class="slice s2" style="background-image: url(http://img01.deviantart.net/ec30/i/2011/178/e/b/the_majestic_grey_wolf_by_picturebypali-d3k5dxp.jpg); "> 
 
       <div class="slice s3" style="background-image: url(http://img01.deviantart.net/ec30/i/2011/178/e/b/the_majestic_grey_wolf_by_picturebypali-d3k5dxp.jpg); "> 
 
        <div class="slice s4" style="background-image: url(http://img01.deviantart.net/ec30/i/2011/178/e/b/the_majestic_grey_wolf_by_picturebypali-d3k5dxp.jpg);"></div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body>

Не совершенным, но его способ сделать это.

источник

2015-07-10 09:43:07

Работает. Большое спасибо! :) – Pikachuu

На самом деле я только что узнал, что он не работает должным образом. Если вы поместите изображение между скобками «background: url();» на последнем фрагменте это то же изображение, что и на первом фрагменте – Pikachuu

что? они представляют собой два разных изображения. Разве вы не разместили одно и то же изображение на URL-адресе? –

CSS: Поместите картинку на другую страницу

ответ

Смежные вопросы