2,173
עריכות
שינויים
קפיצה לניווט
קפיצה לחיפוש
אין תקציר עריכה
<html><head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> <link rel="stylesheet" type="text/css" href="/css/result-light.css"> <script type="text/javascript" src="http://mcpants.github.io/jquery.shapeshift/core/jquery.shapeshift.min.js"></script> <style type="text/css"> .container { border: 0px dashed #ccc; position: relative; max-width:650px;} .container > div { background: transparent; height: 150px; position: absolute; width: 150px;} .container > div[data-ss-colspan='4'] { width: 150px; }.container > div[data-ss-colspan='2'] { width: 309px; height:309px; background: #CCC;} .container .ss-placeholder-child { background: #000; opacity:0.1; } /* flip */.panel { margin: 0 auto; width: 130px; height: 130px; position: relative; font-size: .8em; -webkit-perspective: 600px; -moz-perspective: 600px;}.panel .front { position: absolute; top: 0; z-index: 900; width: inherit; height: inherit; text-align: center;}.panel .back { position: absolute; top: 0; z-index: 800; width: inherit; height: inherit;} .panel { margin: 0 auto; width: 130px; height: 130px; position: relative; font-size: .8em; -webkit-perspective: 600px; -moz-perspective: 600px;}/* -- make sure to declare a default for every property that you want animated -- *//* -- general styles, including Y axis rotation -- */.panel .front { position: absolute; top: 0; z-index: 900; width: inherit; height: inherit; text-align: center; -webkit-transform: rotateX(0deg) rotateY(0deg); -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -moz-transform: rotateX(0deg) rotateY(0deg); -moz-transform-style: preserve-3d; -moz-backface-visibility: hidden; /* -- transition is the magic sauce for animation -- */ -o-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out;}.panel.flip .front { z-index: 900; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg);}.panel .back { position: absolute; top: 0; z-index: 800; width: inherit; height: inherit; -webkit-transform: rotateY(-180deg); -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -moz-transform: rotateY(-180deg); -moz-transform-style: preserve-3d; -moz-backface-visibility: hidden; /* -- transition is the magic sauce for animation -- */ -o-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out;}.panel.flip .back { z-index: 1000; -webkit-transform: rotateX(0deg) rotateY(0deg); -moz-transform: rotateX(0deg) rotateY(0deg);} #artitle { background: #ccc; background-repeat: no-repeat; background-position: center center; background-attachment:fixed; height: 150px; position: absolute; width: 150px;display: flex;justify-content: center;align-items: center;}#artitle h3 {margin: 13px;} #artitle2 { background: #CCC; height: 150px; position: absolute; width: 150px;}#gridcell h2 {margin: 0.5em;text-align: center;font-size: xx-large;border: none;font-weight: bold;}#gridcell p {margin: 0.4em 2em;text-align: justify;}</style>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
minColumns: 4
});
$(document).ready(function(){
// set up hover panels
});
});//]]>
</script>
</head>