{"id":278311,"date":"2016-04-14T19:05:05","date_gmt":"2016-04-14T15:05:05","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=278311"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=278311","title":{"rendered":"\u0421\u043e\u0437\u0434\u0430\u0435\u043c 3D \u044d\u0444\u0444\u0435\u043a\u0442\u044b CSS \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c jQuery"},"content":{"rendered":"

\u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u043e, \u043a\u0430\u043a \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c jQuery \u0441\u043e\u0437\u0434\u0430\u0442\u044c 3D \u044d\u0444\u0444\u0435\u043a\u0442\u044b CSS \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043a\u0443\u0440\u0441\u043e\u0440\u0430.<\/p>\n

<\/p>\n

\u0422\u0443\u0442 \u043c\u043e\u0436\u043d\u043e \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c<\/a>, \u0430 \u0442\u0443\u0442 \u2014 \u0421\u043a\u0430\u0447\u0430\u0442\u044c<\/b><\/a><\/p>\n

\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 \u043d\u0438\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043c\u0438\u043d\u0438\u0430\u0442\u044e\u0440\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e CSS. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f jQuery \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043e\u043d\u0438 \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0432 \u0441\u0432\u0435\u0440\u043d\u0443\u0442\u043e\u043c \u0438\u043b\u0438 \u0441\u043e\u0433\u043d\u0443\u0442\u043e\u043c \u0432\u0438\u0434\u0435. \u0414\u043b\u044f \u044d\u0442\u0438\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f CSS 3D transforms.<\/p>\n

<\/a><\/p>\n

\u0420\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u0432 HTML<\/h4>\n

\u0422\u0430\u043a\u043e\u0439 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u0434\u043b\u044f \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u043d\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b:<\/p>\n

<div id="grid" class="main">   \t<div class="view">  \t\t<div class="view-back"> \t\t\t<span data-icon="A">566<\/span> \t\t\t<span data-icon="B">124<\/span> \t\t\t<a href="http:\/\/www.flickr.com\/photos\/ag2r\/5439506585\/in\/photostream">\u2192<\/a> \t\t<\/div>  \t\t<img src="images\/1.jpg" \/>  \t<\/div>  \t<div class="view">  \t<!-- ... -->  \t<\/div>  \t<!-- ... --> \t <\/div> <\/code><\/pre>\n
  \u041a\u0430\u0436\u0434\u0430\u044f \u043c\u0438\u043d\u0438\u0430\u0442\u044e\u0440\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435. \u041d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0430 \u0441 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 view, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f JavaScript:<\/p>\n
<div class="view">  \t<div class="view-back"> \t\t<!-- ... --> \t<\/div> \t \t<div class="slice s1" style="background-image: url(images\/1.jpg); "> \t\t<span class="overlay"><\/span> \t\t \t\t<div class="slice s2" style="background-image: url(images\/1.jpg); "> \t\t\t<span class="overlay"><\/span> \t\t\t \t\t\t<div class="slice s3" style="background-image: url(images\/1.jpg); "> \t\t\t\t<span class="overlay"><\/span> \t\t\t\t \t\t\t\t<div class="slice s4" style="background-image: url(images\/1.jpg); "> \t\t\t\t\t<span class="overlay"><\/span> \t\t\t\t\t \t\t\t\t\t<div class="slice s5" style="background-image: url(images\/1.jpg); "> \t\t\t\t\t\t<span class="overlay"><\/span> \t\t\t\t\t<\/div><!-- \/s5 --> \t\t\t\t \t\t\t\t<\/div><!-- \/s4 --> \t\t\t\t\t \t\t\t<\/div><!-- \/s3 --> \t\t\t\t \t\t<\/div><!-- \/s2 --> \t\t\t \t<\/div><!-- \/s1 --> \t <\/div><!-- \/view --> <\/code><\/pre>\n
  \u0423 \u043a\u0430\u0436\u0434\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438 \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0435\u0441\u0442\u044c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430, \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u0441\u044f \u043d\u0430\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u0440\u0438\u0434\u0430\u0441\u0442 \u044d\u0444\u0444\u0435\u043a\u0442\u0443 \u0431\u043e\u043b\u044c\u0448\u0435\u0439 \u0440\u0435\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u043e\u0441\u0442\u0438.<\/p>\n
  \u0424\u0443\u043d\u043a\u0446\u0438\u044f JavaScript \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n
$.fn.hoverfold = function( args ) {  \tthis.each( function() { \t \t\t$( this ).children( '.view' ).each( function() { \t\t \t\t\tvar $item \t= $( this ), \t\t\t\timg\t\t= $item.children( 'img' ).attr( 'src' ), \t\t\t\tstruct\t= '<div class="slice s1">'; \t\t\t\t\tstruct\t+='<div class="slice s2">'; \t\t\t\t\t\tstruct\t+='<div class="slice s3">'; \t\t\t\t\t\t\tstruct\t+='<div class="slice s4">'; \t\t\t\t\t\t\t\tstruct\t+='<div class="slice s5">'; \t\t\t\t\t\t\t\tstruct\t+='<\/div>'; \t\t\t\t\t\t\tstruct\t+='<\/div>'; \t\t\t\t\t\tstruct\t+='<\/div>'; \t\t\t\t\tstruct\t+='<\/div>'; \t\t\t\tstruct\t+='<\/div>'; \t\t\t\t \t\t\tvar $struct = $( struct ); \t\t\t \t\t\t$item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '<span class="overlay" ><\/span>' ) ); \t\t\t \t\t} ); \t\t \t});  }; <\/code><\/pre>\n
  \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 \u043e\u0431\u0449\u0438\u0445 \u0441\u0442\u0438\u043b\u0435\u0439.<\/p>\n
CSS<\/h4>\n
  \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0441\u0442\u0438\u043b\u044c \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0441 \u043c\u0438\u043d\u0438\u0430\u0442\u044e\u0440\u0430\u043c\u0438 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u0435\u0440\u0441\u043f\u0435\u043a\u0442\u0438\u0432\u0443:<\/p>\n
.view { \twidth: 316px; \theight: 216px; \tmargin: 10px; \tfloat: left; \tposition: relative; \tborder: 8px solid #fff; \tbox-shadow: 1px 1px 2px rgba(0,0,0,0.05); \tbackground: #333; \tperspective: 500px; } <\/code><\/pre>\n
  \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0447\u0430\u0441\u0442\u044f\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u043c 3D transitions:<\/p>\n
 .view .slice{ \twidth: 60px; \theight: 100%; \tz-index: 100; \ttransform-style: preserve-3d; \ttransform-origin: left center; \ttransition: transform 150ms ease-in-out; \t } <\/code><\/pre>\n
  \u0427\u0430\u0441\u0442\u044c \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0441\u0434\u0432\u0438\u0433\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0441\u0442\u0438\u043b\u044c:<\/p>\n
.view div.view-back{ \twidth: 50%; \theight: 100%; \tposition: absolute; \tright: 0; \tbackground: #666; \tz-index: 0; } <\/code><\/pre>\n
  \u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b span \u0438 \u0441\u0441\u044b\u043b\u043a\u0438:<\/p>\n
.view-back span { \tdisplay: block; \tfloat: right; \tpadding: 5px 20px 5px; \twidth: 100%; \ttext-align: right; \tfont-size: 16px; \tcolor: rgba(255,255,255,0.6); }  .view-back span:first-child { \tpadding-top: 20px; }  .view-back a { \tdisplay: bock; \tfont-size: 18px; \tcolor: rgba(255,255,255,0.4); \tposition: absolute; \tright: 15px; \tbottom: 15px; \tborder: 2px solid rgba(255,255,255,0.3); \tborder-radius: 50%; \twidth: 30px; \theight: 30px; \tline-height: 22px; \ttext-align: center; \tfont-weight: 700; }  .view-back a:hover { \tcolor: #fff; \tborder-color: #fff; } <\/code><\/pre>\n
  \u0414\u043b\u044f \u0438\u043a\u043e\u043d\u043a\u0438 \u043f\u0435\u0440\u0435\u0434 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 span \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0448\u0440\u0438\u0444\u0442 Fontello. \u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442 data-icon \u0432 span, \u0434\u043b\u044f \u0432\u044b\u0432\u043e\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043f\u0441\u0435\u0432\u0434\u043e-\u043a\u043b\u0430\u0441\u0441 :before<\/i><\/p>\n
.view-back span[data-icon]:before {     content: attr(data-icon);     font-family: 'icons';     color: #aaa; \tcolor: rgba(255,255,255,0.2); \ttext-shadow: 0 0 1px rgba(255,255,255,0.2); \tpadding-right: 5px; } <\/code><\/pre>\n
  \u0412\u0441\u0435, \u043a\u0440\u043e\u043c\u0435 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438, \u0434\u043e\u043b\u0436\u043d\u043e \u0441\u0434\u0432\u0438\u043d\u0443\u0442\u044c\u0441\u044f \u0432\u043f\u0440\u0430\u0432\u043e (\u0432\u0441\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u043c \u043f\u0440\u043e \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443):<\/p>\n
.view .s2,  .view .s3,  .view .s4,  .view .s5 { \ttransform: translateX(60px); } <\/code><\/pre>\n
  \u0414\u0430\u043b\u0435\u0435 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 background \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0444\u043e\u043d\u043e\u0432\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f:<\/p>\n
.view .s1 { \tbackground-position: 0px 0px; } .view .s2 { \tbackground-position: -60px 0px; } .view .s3 { \tbackground-position: -120px 0px; } .view .s4 { \tbackground-position: -180px 0px; } .view .s5 { \tbackground-position: -240px 0px; } <\/code><\/pre>\n
  \u0412 overlays \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c 0. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u0438 \u043c\u0435\u043d\u044f\u0435\u043c \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u043d\u0435\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438 CSS \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438:<\/p>\n
.view .overlay { \twidth: 60px; \theight: 100%; \topacity: 0; \tposition: absolute; \ttransition: opacity 150ms ease-in-out; }  .view:hover .overlay { \topacity: 1; } <\/code><\/pre>\n
  \u0417\u0430\u0444\u0438\u043a\u0441\u0438\u0440\u0443\u0435\u043c \u043f\u043e\u0437\u0438\u0446\u0438\u044e \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c z-index \u0434\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u0422\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 3D \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f:<\/p>\n
.view img { \tposition: absolute; \tz-index: 0; \ttransition: left 0.3s ease-in-out; } <\/code><\/pre>\n
  \u0412 \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 3D \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0441\u0442\u0438\u043b\u0435\u0439 fallback.css<\/i>, \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435\u043c:<\/p>\n
 .view { \toverflow: hidden; }  .view:hover img { \tleft: -85px; }  .view div.view-back { \tbackground: #666; } <\/code><\/pre>\n
  \u042d\u0442\u043e \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0442\u044c\u0441\u044f \u0432\u043b\u0435\u0432\u043e \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043a\u0443\u0440\u0441\u043e\u0440\u0430. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435.<\/p>\n
\u041f\u0440\u0438\u043c\u0435\u0440<\/h4>\n
  \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u044d\u0444\u0444\u0435\u043a\u0442 \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u043d\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u0438\u0440\u0443\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0441\u043f\u0435\u043a\u0442\u0438\u0432\u044b \u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432:<\/p>\n
 .view { \tperspective: 1050px; }  .view div { \ttransition: all 0.3s ease-in-out; } <\/code><\/pre>\n
  \u0412\u0442\u043e\u0440\u0430\u044f, \u0442\u0440\u0435\u0442\u044c\u044f, \u0447\u0435\u0442\u0432\u0435\u0440\u0442\u0430\u044f \u0438 \u043f\u044f\u0442\u0430\u044f \u0447\u0430\u0441\u0442\u0438 \u0431\u0443\u0434\u0443\u0442 \u043f\u0435\u0440\u0435\u0434\u0432\u0438\u043d\u0443\u0442\u044b \u0438 \u043f\u043e\u0432\u0435\u0440\u043d\u0443\u0442\u044b \u0432 3D, \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u044f \u044d\u0444\u0444\u0435\u043a\u0442 \u0441\u0433\u0438\u0431\u0430:<\/p>\n
.view:hover .s2{ \ttransform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg); } .view:hover .s3,  .view:hover .s5{ \ttransform: translate3d(59px,0,0) rotate3d(0,1,0,90deg); } .view:hover .s4{ \ttransform: translate3d(59px,0,0) rotate3d(0,1,0,-90deg); } <\/code><\/pre>\n
  \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u044b \u0432 overlays \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0435\u0439 \u0440\u0435\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u043e\u0441\u0442\u0438:<\/p>\n
.view .s2 > .overlay { \tbackground: linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%); }  .view .s3 > .overlay { \tbackground: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%); }  .view .s4 > .overlay { \tbackground: linear-gradient(right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%); }  .view .s5 > .overlay { \tbackground: linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%); } <\/code><\/pre>\n
  \u0412 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0434\u0435\u0442\u0430\u043b\u044f\u0445 \u043c\u0438\u043d\u0438\u0430\u0442\u044e\u0440\u044b \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u0442\u0430\u043a\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0432\u043e\u0432\u0430\u0442\u044c \u0444\u043e\u043d\u043e\u0432\u044b\u0439 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442 CSS (\u0434\u043b\u044f \u043c\u043e\u0434\u0435\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0435\u043d\u0438 \u043e\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439):<\/p>\n
 .view div.view-back{ \tbackground: linear-gradient(left, #0a0a0a 0%,#666666 100%); } <\/code><\/pre>\n
  \u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b Angelo Gonz\u00e1lez<\/a>, \u0441 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u043b\u0438\u0446\u0435\u043d\u0437\u0438\u0435\u0439 Creative Commons Attribution 2.0 Generic (CC BY 2.0) License<\/a>.               <\/p>\n
<\/div>\n
 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habrahabr.ru\/post\/281609\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
       \u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u043e, \u043a\u0430\u043a \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c jQuery \u0441\u043e\u0437\u0434\u0430\u0442\u044c 3D \u044d\u0444\u0444\u0435\u043a\u0442\u044b CSS \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043a\u0443\u0440\u0441\u043e\u0440\u0430.<\/p>\n
  <\/p>\n
  \u0422\u0443\u0442 \u043c\u043e\u0436\u043d\u043e \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c<\/a>, \u0430 \u0442\u0443\u0442 \u2014 \u0421\u043a\u0430\u0447\u0430\u0442\u044c<\/b><\/a><\/p>\n
  \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 \u043d\u0438\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043c\u0438\u043d\u0438\u0430\u0442\u044e\u0440\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e CSS. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f jQuery \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043e\u043d\u0438 \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0432 \u0441\u0432\u0435\u0440\u043d\u0443\u0442\u043e\u043c \u0438\u043b\u0438 \u0441\u043e\u0433\u043d\u0443\u0442\u043e\u043c \u0432\u0438\u0434\u0435. \u0414\u043b\u044f \u044d\u0442\u0438\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f CSS 3D transforms.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-278311","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/278311","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=278311"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/278311\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=278311"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=278311"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=278311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}