以下是 支持3D预览电影院座位预定代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html lang="zh" class="no-js">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>支持3D预览电影院座位预定代码</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr-custom.js"></script>
</head>
<body>
<div class="container">
<div class="cube">
<div class="cube__side cube__side--front"></div>
<div class="cube__side cube__side--back">
<div class="screen">
<div class="video">
<video class="video-player" src="media/sintel.mp4" preload="auto" poster="media/sintel.jpg">
<source src="media/sintel.ogg" type='video/ogg; codecs="theora, vorbis"'>
<source src="media/sintel.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
<p>对不起，你的浏览器不支持这种video格式。</p>
</video>
<button class="action action--play action--shown" aria-label="Play Video"></button>
</div>
<div class="intro intro--shown">
<div class="intro__side">
<h2 class="intro__title">
</h2>
</div>
<div class="intro__side">
<button class="action action--seats">选择你的座位</button>
</div>
</div>
</div>
</div>
<div class="cube__side cube__side--left"></div>
<div class="cube__side cube__side--right"></div>
<div class="cube__side cube__side--top"></div>
<div class="rows rows--large">
<div class="row">
<div data-seat="A1" class="row__seat"></div>
<div data-seat="A2" class="row__seat"></div>
<div data-seat="A3" class="row__seat"></div>
<div data-seat="A4" class="row__seat"></div>
<div data-seat="A5" class="row__seat"></div>
<div data-seat="A6" class="row__seat"></div>
<div data-seat="A7" class="row__seat"></div>
<div data-seat="A8" class="row__seat"></div>
<div data-seat="A9" class="row__seat"></div>
<div data-seat="A10" class="row__seat"></div>
<div data-seat="A11" class="row__seat"></div>
<div data-seat="A12" class="row__seat"></div>
<div data-seat="A13" class="row__seat"></div>
<div data-seat="A14" class="row__seat"></div>
<div data-seat="A15" class="row__seat"></div>
<div data-seat="A16" class="row__seat"></div>
<div data-seat="A17" class="row__seat"></div>
<div data-seat="A18" class="row__seat"></div>
</div>
<div class="row">
<div data-seat="B1" class="row__seat"></div>
<div data-seat="B2" class="row__seat"></div>
<div data-seat="B3" class="row__seat"></div>
<div data-seat="B4" class="row__seat"></div>
<div data-seat="B5" class="row__seat"></div>
<div data-seat="B6" class="row__seat"></div>
<div data-seat="B7" class="row__seat"></div>
<div data-seat="B8" class="row__seat"></div>
<div data-seat="B9" class="row__seat"></div>
<div data-seat="B10" class="row__seat"></div>
<div data-seat="B11" class="row__seat"></div>
<div data-seat="B12" class="row__seat"></div>
<div data-seat="B13" class="row__seat"></div>
<div data-seat="B14" class="row__seat"></div>
<div data-seat="B15" class="row__seat"></div>
<div data-seat="B16" class="row__seat"></div>
<div data-seat="B17" class="row__seat"></div>
<div data-seat="B18" class="row__seat"></div>
</div>
<div class="row">
<div data-seat="C1" class="row__seat"></div>
<div data-seat="C2" class="row__seat"></div>
<div data-seat="C3" class="row__seat"></div>
<div data-seat="C4" class="row__seat"></div>
<div data-seat="C5" class="row__seat"></div>
<div data-seat="C6" class="row__seat"></div>
<div data-seat="C7" class="row__seat"></div>
<div data-seat="C8" class="row__seat"></div>
<div data-seat="C9" class="row__seat"></div>
<div data-seat="C10" class="row__seat"></div>
<div data-seat="C11" class="row__seat"></div>
<div data-seat="C12" class="row__seat"></div>
<div data-seat="C13" class="row__seat"></div>
<div data-seat="C14" class="row__seat"></div>
<div data-seat="C15" class="row__seat"></div>
<div data-seat="C16" class="row__seat"></div>
<div data-seat="C17" class="row__seat"></div>
<div data-seat="C18" class="row__seat"></div>
</div>
<div class="row">
<div data-seat="D1" class="row__seat"></div>
<div data-seat="D2" class="row__seat"></div>
<div data-seat="D3" class="row__seat"></div>
<div data-seat="D4" class="row__seat"></div>
<div data-seat="D5" class="row__seat"></div>
<div data-seat="D6" class="row__seat"></div>
<div data-seat="D7" class="row__seat"></div>
<div data-seat="D8" class="row__seat"></div>
<div data-seat="D9" class="row__seat"></div>
<div data-seat="D10" class="row__seat"></div>
<div data-seat="D11" class="row__seat"></div>
<div data-seat="D12" class="row__seat"></div>
<div data-seat="D13" class="row__seat"></div>
<div data-seat="D14" class="row__seat"></div>
<div data-seat="D15" class="row__seat"></div>
<div data-seat="D16" class="row__seat"></div>
<div data-seat="D17" class="row__seat"></div>
<div data-seat="D18" class="row__seat"></div>
</div>
<div class="row">
<div data-seat="E1" class="row__seat"></div>
<div data-seat="E2" class="row__seat"></div>
<div data-seat="E3" class="row__seat"></div>
<div data-seat="E4" class="row__seat"></div>
<div data-seat="E5" class="row__seat"></div>
<div data-seat="E6" class="row__seat"></div>
<div data-seat="E7" class="row__seat"></div>
<div data-seat="E8" class="row__seat"></div>
<div data-seat="E9" class="row__seat"></div>
<div data-seat="E10" class="row__seat"></div>
<div data-seat="E11" class="row__seat"></div>
<div data-seat="E12" class="row__seat"></div>
<div data-seat="E13" class="row__seat"></div>
<div data-seat="E14" class="row__seat"></div>
<div data-seat="E15" class="row__seat"></div>
<div data-seat="E16" class="row__seat"></div>
<div data-seat="E17" class="row__seat"></div>
<div data-seat="E18" class="row__seat"></div>
</div>
<div class="row">
<div data-seat="F1" class="row__seat"></div>
<div data-seat="F2" class="row__seat"></div>
<div data-seat="F3" class="row__seat"></div>
<div data-seat="F4" class="row__seat"></div>
<div data-seat="F5" class="row__seat"></div>
<div data-seat="F6" class="row__seat"></div>
<div data-seat="F7" class="row__seat"></div>
<div data-seat="F8" class="row__seat"></div>
<div data-seat="F9" class="row__seat"></div>
<div data-seat="F10" class="row__seat"></div>
<div data-seat="F11" class="row__seat"></div>
<div data-seat="F12" class="row__seat"></div>
<div data-seat="F13" class="row__seat"></div>
<div data-seat="F14" class="row__seat"></div>
<div data-seat="F15" class="row__seat"></div>
<div data-seat="F16" class="row__seat"></div>
<div data-seat="F17" class="row__seat"></div>
<div data-seat="F18" class="row__seat"></div>
</div>
<div class="row">
<div data-seat="G1" class="row__seat"></div>
<div data-seat="G2" class="row__seat"></div>
<div data-seat="G3" class="row__seat"></div>
<div data-seat="G4" class="row__seat"></div>
<div data-seat="G5" class="row__seat"></div>
<div data-seat="G6" class="row__seat"></div>
<div data-seat="G7" class="row__seat"></div>
<div data-seat="G8" class="row__seat"></div>
<div data-seat="G9" class="row__seat"></div>
<div data-seat="G10" class="row__seat"></div>
<div data-seat="G11" class="row__seat"></div>
<div data-seat="G12" class="row__seat"></div>
<div data-seat="G13" class="row__seat"></div>
<div data-seat="G14" class="row__seat"></div>
<div data-seat="G15" class="row__seat"></div>
<div data-seat="G16" class="row__seat"></div>
<div data-seat="G17" class="row__seat"></div>
<div data-seat="G18" class="row__seat"></div>
</div>
<div class="row">
<div data-seat="H1" class="row__seat"></div>
<div data-seat="H2" class="row__seat"></div>
<div data-seat="H3" class="row__seat"></div>
<div data-seat="H4" class="row__seat"></div>
<div data-seat="H5" class="row__seat"></div>
<div data-seat="H6" class="row__seat"></div>
<div data-seat="H7" class="row__seat"></div>
<div data-seat="H8" class="row__seat"></div>
<div data-seat="H9" class="row__seat"></div>
<div data-seat="H10" class="row__seat"></div>
<div data-seat="H11" class="row__seat"></div>
<div data-seat="H12" class="row__seat"></div>
<div data-seat="H13" class="row__seat"></div>
<div data-seat="H14" class="row__seat"></div>
<div data-seat="H15" class="row__seat"></div>
<div data-seat="H16" class="row__seat"></div>
<div data-seat="H17" class="row__seat"></div>
<div data-seat="H18" class="row__seat"></div>
</div>
<div class="row">
<div data-seat="I1" class="row__seat"></div>
<div data-seat="I2" class="row__seat"></div>
<div data-seat="I3" class="row__seat"></div>
<div data-seat="I4" class="row__seat"></div>
<div data-seat="I5" class="row__seat"></div>
<div data-seat="I6" class="row__seat"></div>
<div data-seat="I7" class="row__seat"></div>
<div data-seat="I8" class="row__seat"></div>
<div data-seat="I9" class="row__seat"></div>
<div data-seat="I10" class="row__seat"></div>
<div data-seat="I11" class="row__seat"></div>
<div data-seat="I12" class="row__seat"></div>
<div data-seat="I13" class="row__seat"></div>
<div data-seat="I14" class="row__seat"></div>
<div data-seat="I15" class="row__seat"></div>
<div data-seat="I16" class="row__seat"></div>
<div data-seat="I17" class="row__seat"></div>
<div data-seat="I18" class="row__seat"></div>
</div>
<div class="row">
<div data-seat="J1" class="row__seat"></div>
<div data-seat="J2" class="row__seat"></div>
<div data-seat="J3" class="row__seat"></div>
<div data-seat="J4" class="row__seat"></div>
<div data-seat="J5" class="row__seat"></div>
<div data-seat="J6" class="row__seat"></div>
<div data-seat="J7" class="row__seat"></div>
<div data-seat="J8" class="row__seat"></div>
<div data-seat="J9" class="row__seat"></div>
<div data-seat="J10" class="row__seat"></div>
<div data-seat="J11" class="row__seat"></div>
<div data-seat="J12" class="row__seat"></div>
<div data-seat="J13" class="row__seat"></div>
<div data-seat="J14" class="row__seat"></div>
<div data-seat="J15" class="row__seat"></div>
<div data-seat="J16" class="row__seat"></div>
<div data-seat="J17" class="row__seat"></div>
<div data-seat="J18" class="row__seat"></div>
</div>
<div class="row">
<div data-seat="K1" class="row__seat"></div>
<div data-seat="K2" class="row__seat"></div>
<div data-seat="K3" class="row__seat"></div>
<div data-seat="K4" class="row__seat"></div>
<div data-seat="K5" class="row__seat"></div>
<div data-seat="K6" class="row__seat"></div>
<div data-seat="K7" class="row__seat"></div>
<div data-seat="K8" class="row__seat"></div>
<div data-seat="K9" class="row__seat"></div>
<div data-seat="K10" class="row__seat"></div>
<div data-seat="K11" class="row__seat"></div>
<div data-seat="K12" class="row__seat"></div>
<div data-seat="K13" class="row__seat"></div>
<div data-seat="K14" class="row__seat"></div>
<div data-seat="K15" class="row__seat"></div>
<div data-seat="K16" class="row__seat"></div>
<div data-seat="K17" class="row__seat"></div>
<div data-seat="K18" class="row__seat"></div>
</div>
<div class="row">
<div data-seat="L1" class="row__seat"></div>
<div data-seat="L2" class="row__seat"></div>
<div data-seat="L3" class="row__seat"></div>
<div data-seat="L4" class="row__seat"></div>
<div data-seat="L5" class="row__seat"></div>
<div data-seat="L6" class="row__seat"></div>
<div data-seat="L7" class="row__seat"></div>
<div data-seat="L8" class="row__seat"></div>
<div data-seat="L9" class="row__seat"></div>
<div data-seat="L10" class="row__seat"></div>
<div data-seat="L11" class="row__seat"></div>
<div data-seat="L12" class="row__seat"></div>
<div data-seat="L13" class="row__seat"></div>
<div data-seat="L14" class="row__seat"></div>
<div data-seat="L15" class="row__seat"></div>
<div data-seat="L16" class="row__seat"></div>
<div data-seat="L17" class="row__seat"></div>
<div data-seat="L18" class="row__seat"></div>
</div>
<div class="row">
<div data-seat="M1" class="row__seat"></div>
<div data-seat="M2" class="row__seat"></div>
<div data-seat="M3" class="row__seat"></div>
<div data-seat="M4" class="row__seat"></div>
<div data-seat="M5" class="row__seat"></div>
<div data-seat="M6" class="row__seat"></div>
<div data-seat="M7" class="row__seat"></div>
<div data-seat="M8" class="row__seat"></div>
<div data-seat="M9" class="row__seat"></div>
<div data-seat="M10" class="row__seat"></div>
<div data-seat="M11" class="row__seat"></div>
<div data-seat="M12" class="row__seat"></div>
<div data-seat="M13" class="row__seat"></div>
<div data-seat="M14" class="row__seat"></div>
<div data-seat="M15" class="row__seat"></div>
<div data-seat="M16" class="row__seat"></div>
<div data-seat="M17" class="row__seat"></div>
<div data-seat="M18" class="row__seat"></div>
</div>
<div class="row">
<div data-seat="N1" class="row__seat"></div>
<div data-seat="N2" class="row__seat"></div>
<div data-seat="N3" class="row__seat"></div>
<div data-seat="N4" class="row__seat"></div>
<div data-seat="N5" class="row__seat"></div>
<div data-seat="N6" class="row__seat"></div>
<div data-seat="N7" class="row__seat"></div>
<div data-seat="N8" class="row__seat"></div>
<div data-seat="N9" class="row__seat"></div>
<div data-seat="N10" class="row__seat"></div>
<div data-seat="N11" class="row__seat"></div>
<div data-seat="N12" class="row__seat"></div>
<div data-seat="N13" class="row__seat"></div>
<div data-seat="N14" class="row__seat"></div>
<div data-seat="N15" class="row__seat"></div>
<div data-seat="N16" class="row__seat"></div>
<div data-seat="N17" class="row__seat"></div>
<div data-seat="N18" class="row__seat"></div>
</div>
<div class="row">
<div data-seat="O1" class="row__seat"></div>
<div data-seat="O2" class="row__seat"></div>
<div data-seat="O3" class="row__seat"></div>
<div data-seat="O4" class="row__seat"></div>
<div data-seat="O5" class="row__seat"></div>
<div data-seat="O6" class="row__seat"></div>
<div data-seat="O7" class="row__seat"></div>
<div data-seat="O8" class="row__seat"></div>
<div data-seat="O9" class="row__seat"></div>
<div data-seat="O10" class="row__seat"></div>
<div data-seat="O11" class="row__seat"></div>
<div data-seat="O12" class="row__seat"></div>
<div data-seat="O13" class="row__seat"></div>
<div data-seat="O14" class="row__seat"></div>
<div data-seat="O15" class="row__seat"></div>
<div data-seat="O16" class="row__seat"></div>
<div data-seat="O17" class="row__seat"></div>
<div data-seat="O18" class="row__seat"></div>
</div>
<div class="row">
<div data-seat="P1" class="row__seat"></div>
<div data-seat="P2" class="row__seat"></div>
<div data-seat="P3" class="row__seat"></div>
<div data-seat="P4" class="row__seat"></div>
<div data-seat="P5" class="row__seat"></div>
<div data-seat="P6" class="row__seat"></div>
<div data-seat="P7" class="row__seat"></div>
<div data-seat="P8" class="row__seat"></div>
<div data-seat="P9" class="row__seat"></div>
<div data-seat="P10" class="row__seat"></div>
<div data-seat="P11" class="row__seat"></div>
<div data-seat="P12" class="row__seat"></div>
<div data-seat="P13" class="row__seat"></div>
<div data-seat="P14" class="row__seat"></div>
<div data-seat="P15" class="row__seat"></div>
<div data-seat="P16" class="row__seat"></div>
<div data-seat="P17" class="row__seat"></div>
<div data-seat="P18" class="row__seat"></div>
</div>
<div class="row">
<div data-seat="Q1" class="row__seat"></div>
<div data-seat="Q2" class="row__seat"></div>
<div data-seat="Q3" class="row__seat"></div>
<div data-seat="Q4" class="row__seat"></div>
<div data-seat="Q5" class="row__seat"></div>
<div data-seat="Q6" class="row__seat"></div>
<div data-seat="Q7" class="row__seat"></div>
<div data-seat="Q8" class="row__seat"></div>
<div data-seat="Q9" class="row__seat"></div>
<div data-seat="Q10" class="row__seat"></div>
<div data-seat="Q11" class="row__seat"></div>
<div data-seat="Q12" class="row__seat"></div>
<div data-seat="Q13" class="row__seat"></div>
<div data-seat="Q14" class="row__seat"></div>
<div data-seat="Q15" class="row__seat"></div>
<div data-seat="Q16" class="row__seat"></div>
<div data-seat="Q17" class="row__seat"></div>
<div data-seat="Q18" class="row__seat"></div>
</div>
<div class="row">
<div data-seat="R1" class="row__seat"></div>
<div data-seat="R2" class="row__seat"></div>
<div data-seat="R3" class="row__seat"></div>
<div data-seat="R4" class="row__seat"></div>
<div data-seat="R5" class="row__seat"></div>
<div data-seat="R6" class="row__seat"></div>
<div data-seat="R7" class="row__seat"></div>
<div data-seat="R8" class="row__seat"></div>
<div data-seat="R9" class="row__seat"></div>
<div data-seat="R10" class="row__seat"></div>
<div data-seat="R11" class="row__seat"></div>
<div data-seat="R12" class="row__seat"></div>
<div data-seat="R13" class="row__seat"></div>
<div data-seat="R14" class="row__seat"></div>
<div data-seat="R15" class="row__seat"></div>
<div data-seat="R16" class="row__seat"></div>
<div data-seat="R17" class="row__seat"></div>
<div data-seat="R18" class="row__seat"></div>
</div>
</div>
<!-- /rows -->
</div><!-- /cube -->
</div><!-- /container -->
<div class="plan">
<h3 class="plan__title">Seating Plan</h3>
<div class="rows rows--mini">
<div class="row">
<div class="row__seat tooltip" data-tooltip="A1"></div>
<div class="row__seat tooltip" data-tooltip="A2"></div>
<div class="row__seat tooltip" data-tooltip="A3"></div>
<div class="row__seat tooltip" data-tooltip="A4"></div>
<div class="row__seat tooltip" data-tooltip="A5"></div>
<div class="row__seat tooltip" data-tooltip="A6"></div>
<div class="row__seat tooltip" data-tooltip="A7"></div>
<div class="row__seat tooltip" data-tooltip="A8"></div>
<div class="row__seat tooltip" data-tooltip="A9"></div>
<div class="row__seat row__seat--reserved"></div>
<div class="row__seat row__seat--reserved"></div>
<div class="row__seat row__seat--reserved"></div>
<div class="row__seat tooltip" data-tooltip="A13"></div>
<div class="row__seat tooltip" data-tooltip="A14"></div>
<div class="row__seat tooltip" data-tooltip="A15"></div>
<div class="row__seat tooltip" data-tooltip="A16"></div>
<div class="row__seat tooltip" data-tooltip="A17"></div>
<div class="row__seat tooltip" data-tooltip="A18"></div>
</div>
<div class="row">
<div class="row__seat tooltip" data-tooltip="B1"></div>
<div class="row__seat tooltip" data-tooltip="B2"></div>
<div class="row__seat tooltip" data-tooltip="B3"></div>
<div class="row__seat tooltip" data-tooltip="B4"></div>
<div class="row__seat tooltip" data-tooltip="B5"></div>
<div class="row__seat tooltip" data-tooltip="B6"></div>
<div class="row__seat tooltip" data-tooltip="B7"></div>
<div class="row__seat tooltip" data-tooltip="B8"></div>
<div class="row__seat row__seat--reserved"></div>
<div class="row__seat row__seat--reserved"></div>
<div class="row__seat tooltip" data-tooltip="B11"></div>
<div class="row__seat tooltip" data-tooltip="B12"></div>
<div class="row__seat tooltip" data-tooltip="B13"></div>
<div class="row__seat tooltip" data-tooltip="B14"></div>
<div class="row__seat tooltip" data-tooltip="B15"></div>
<div class="row__seat tooltip" data-tooltip="B16"></div>
<div class="row__seat tooltip" data-tooltip="B17"></div>
<div class="row__seat tooltip" data-tooltip="B18"></div>
</div>
<div class="row">
<div class="row__seat tooltip" data-tooltip="C1"></div>
<div class="row__seat tooltip" data-tooltip="C2"></div>
<div class="row__seat tooltip" data-tooltip="C3"></div>
<div class="row__seat tooltip" data-tooltip="C4"></div>
<div class="row__seat row__seat--reserved"></div>
<div class="row__seat row__seat--reserved"></div>
<div class="row__seat row__seat--reserved"></div>
<div class="row__seat tooltip" data-tooltip="C8"></div>
<div class="row__seat tooltip" data-tooltip="C9"></div>
<div class="row__seat tooltip" data-tooltip="C10"></div>
<div class="row__seat tooltip" data-tooltip="C11"></div>
<div class="row__seat tooltip" data-tooltip="C12"></div>
<div class="row__seat tooltip" data-tooltip="C13"></div>
<div class="row__seat tooltip" data-tooltip="C14"></div>
<div class="row__seat tooltip" data-tooltip="C15"></div>
<div class="row__seat tooltip" data-tooltip="C16"></div>
<div class="row__seat tooltip" data-tooltip="C17"></div>
<div class="row__seat tooltip" data-tooltip="C18"></div>
</div>
<div class="row">
<div class="row__seat tooltip" data-tooltip="D1"></div>
<div class="row__seat tooltip" data-tooltip="D2"></div>
<div class="row__seat tooltip" data-tooltip="D3"></div>
<div class="row__seat tooltip" data-tooltip="D4"></div>
<div class="row__seat tooltip" data-tooltip="D5"></div>
<div class="row__seat tooltip" data-tooltip="D6"></div>
<div class="row__seat tooltip" data-tooltip="D7"></div>
<div class="row__seat tooltip" data-tooltip="D8"></div>
<div class="row__seat tooltip" data-tooltip="D9"></div>
<div class="row__seat tooltip" data-tooltip="D10"></div>
<div class="row__seat tooltip" data-tooltip="D11"></div>
<div class="row__seat tooltip" data-tooltip="D12"></div>
<div class="row__seat tooltip" data-tooltip="D13"></div>
<div class="row__seat tooltip" data-tooltip="D14"></div>
<div class="row__seat tooltip" data-tooltip="D15"></div>
<div class="row__seat row__seat--reserved"></div>
<div class="row__seat row__seat--reserved"></div>
<div class="row__seat row__seat--reserved"></div>
</div>
<div class="row">
<div class="row__seat tooltip" data-tooltip="E1"></div>
<div class="row__seat tooltip" data-tooltip="E2"></div>
<div class="row__seat tooltip" data-tooltip="E3"></div>
<div class="row__seat tooltip" data-tooltip="E4"></div>
<div class="row__seat tooltip" data-tooltip="E5"></div>
<div class="row__seat tooltip" data-tooltip="E6"></div>
<div class="row__seat tooltip" data-tooltip="E7"></div>
<div class="row__seat tooltip" data-tooltip="E8"></div>
<div class="row__seat tooltip" data-tooltip="E9"></div>
<div class="row__seat row__seat--reserved"></div>
<div class="row__seat row__seat--reserved"></div>
<div class="row__seat tooltip" data-tooltip="E12"></div>
<div class="row__seat tooltip" data-tooltip="E13"></div>
<div class="row__seat tooltip" data-tooltip="E14"></div>
<div class="row__seat tooltip" data-tooltip="E15"></div>
<div class="row__seat tooltip" data-tooltip="E16"></div>
<div class="row__seat tooltip" data-tooltip="E17"></div>
<div class="row__seat tooltip" data-tooltip="E18"></div>
</div>
<div class="row">
<div class="row__seat tooltip" data-tooltip="F1"></div>
<div class="row__seat row__seat--reserved"></div>
<div class="row__seat tooltip" data-tooltip="F3"></div>
<div class="row__seat tooltip" data-tooltip="F4"></div>
<div class="row__seat tooltip" data-tooltip="F5"></div>
<div class="row__seat tooltip" data-tooltip="F6"></div>
<div class="row__seat tooltip" data-tooltip="F7"></div>
<div class="row__seat tooltip" data-tooltip="F8"></div>
<div class="row__seat tooltip" data-tooltip="F9"></div>
<div class="row__seat tooltip" data-tooltip="F10"></div>
<div class="row__seat tooltip" data-tooltip="F11"></div>
<div class="row__seat tooltip" data-tooltip="F12"></div>
<div class="row__seat tooltip" data-tooltip="F13"></div>
<div class="row__seat tooltip" data-tooltip="F14"></div>
<div class="row__seat tooltip" data-tooltip="F15"></div>
<div class="row__seat tooltip" data-tooltip="F16"></div>
<div class="row__seat tooltip" data-tooltip="F17"></div>
<div class="row__seat tooltip" data-tooltip="F18"></div>
</div>
<div class="row">
<div class="row__seat tooltip" data-tooltip="G1"></div>
<div class="row__seat tooltip" data-tooltip="G2"></div>
<div class="row__seat tooltip" data-tooltip="G3"></div>
<div class="row__seat tooltip" data-tooltip="G4"></div>
<div class="row__seat tooltip" data-tooltip="G5"></div>
<div class="row__seat tooltip" data-tooltip="G6"></div>
<div class="row__seat row__seat--reserved"></div>
<div class="row__seat row__seat--reserved"></div>
<div class="row__seat tooltip" data-tooltip="G9"></div>
<div class="row__seat tooltip" data-tooltip="G10"></div>
<div class="row__seat tooltip" data-tooltip="G11"></div>
<div class="row__seat tooltip" data-tooltip="G12"></div>
<div class="row__seat tooltip" data-tooltip="G13"></div>
<div class="row__seat tooltip" data-tooltip="G14"></div>
<div class="row__seat tooltip" data-tooltip="G15"></div>
<div class="row__seat tooltip" data-tooltip="G16"></div>
<div class="row__seat tooltip" data-tooltip="G17"></div>
<div class="row__seat tooltip" data-tooltip="G18"></div>
</div>
<div class="row">
<div class="row__seat tooltip" data-tooltip="H1"></div>
<div class="row__seat tooltip" data-tooltip="H2"></div>
<div class="row__seat tooltip" data-tooltip="H3"></div>
<div class="row__seat tooltip" data-tooltip="H4"></div>
<div class="row__seat tooltip" data-tooltip="H5"></div>
<div class="row__seat tooltip" data-tooltip="H6"></div>
<div class="row__seat tooltip" data-tooltip="H7"></div>
<div class="row__seat tooltip" data-tooltip="H8"></div>
<div class="row__seat tooltip" data-tooltip="H9"></div>
<div class="row__seat tooltip" data-tooltip="H10"></div>
<div class="row__seat tooltip" data-tooltip="H11"></div>
<div class="row__seat tooltip" data-tooltip="H12"></div>
<div class="row__seat tooltip" data-tooltip="H13"></div>
<div class="row__seat tooltip" data-tooltip="H14"></div>
<div class="row__seat tooltip" data-tooltip="H15"></div>
<div class="row__seat tooltip" data-tooltip="H16"></div>
<div class="row__seat tooltip" data-tooltip="H17"></div>
<div class="row__seat tooltip" data-tooltip="H18"></div>
</div>
<div class="row">
<div class="row__seat tooltip" data-tooltip="I1"></div>
<div class="row__seat tooltip" data-tooltip="I2"></div>
<div class="row__seat tooltip" data-tooltip="I3"></div>
<div class="row__seat tooltip" data-tooltip="I4"></div>
<div class="row__seat tooltip" data-tooltip="I5"></div>
<div class="row__seat tooltip" data-tooltip="I6"></div>
<div class="row__seat tooltip" data-tooltip="I7"></div>
<div class="row__seat tooltip" data-tooltip="I8"></div>
<div class="row__seat tooltip" data-tooltip="I9"></div>
<div class="row__seat tooltip" data-tooltip="I10"></div>
<div class="row__seat tooltip" data-tooltip="I11"></div>
<div class="row__seat tooltip" data-tooltip="I12"></div>
<div class="row__seat tooltip" data-tooltip="I13"></div>
<div class="row__seat tooltip" data-tooltip="I14"></div>
<div class="row__seat tooltip" data-tooltip="I15"></div>
<div class="row__seat tooltip" data-tooltip="I16"></div>
<div class="row__seat tooltip" data-tooltip="I17"></div>
<div class="row__seat tooltip" data-tooltip="I18"></div>
</div>
<div class="row">
<div class="row__seat tooltip" data-tooltip="J1"></div>
<div class="row__seat tooltip" data-tooltip="J2"></div>
<div class="row__seat tooltip" data-tooltip="J3"></div>
<div class="row__seat tooltip" data-tooltip="J4"></div>
<div class="row__seat row__seat--reserved"></div>
<div class="row__seat row__seat--reserved"></div>
<div class="row__seat row__seat--reserved"></div>
<div class="row__seat tooltip" data-tooltip="J8"></div>
<div class="row__seat tooltip" data-tooltip="J9"></div>
<div class="row__seat tooltip" data-tooltip="J10"></div>
<div class="row__seat tooltip" data-tooltip="J11"></div>
<div class="row__seat tooltip" data-tooltip="J12"></div>
<div class="row__seat tooltip" data-tooltip="J13"></div>
<div class="row__seat tooltip" data-tooltip="J14"></div>
<div class="row__seat tooltip" data-tooltip="J15"></div>
<div class="row__seat tooltip" data-tooltip="J16"></div>
<div class="row__seat tooltip" data-tooltip="J17"></div>
<div class="row__seat tooltip" data-tooltip="J18"></div>
</div>
<div class="row">
<div class="row__seat tooltip" data-tooltip="K1"></div>
<div class="row__seat tooltip" data-tooltip="K2"></div>
<div class="row__seat tooltip" data-tooltip="K3"></div>
<div class="row__seat tooltip" data-tooltip="K4"></div>
<div class="row__seat tooltip" data-tooltip="K5"></div>
<div class="row__seat tooltip" data-tooltip="K6"></div>
<div class="row__seat tooltip" data-tooltip="K7"></div>
<div class="row__seat tooltip" data-tooltip="K8"></div>
<div class="row__seat tooltip" data-tooltip="K9"></div>
<div class="row__seat tooltip" data-tooltip="K10"></div>
<div class="row__seat tooltip" data-tooltip="K11"></div>
<div class="row__seat tooltip" data-tooltip="K12"></div>
<div class="row__seat tooltip" data-tooltip="K13"></div>
<div class="row__seat tooltip" data-tooltip="K14"></div>
<div class="row__seat tooltip" data-tooltip="K15"></div>
<div class="row__seat tooltip" data-tooltip="K16"></div>
<div class="row__seat tooltip" data-tooltip="K17"></div>
<div class="row__seat tooltip" data-tooltip="K18"></div>
</div>
<div class="row">
<div class="row__seat tooltip" data-tooltip="L1"></div>
<div class="row__seat tooltip" data-tooltip="L2"></div>
<div class="row__seat tooltip" data-tooltip="L3"></div>
<div class="row__seat tooltip" data-tooltip="L4"></div>
<div class="row__seat tooltip" data-tooltip="L5"></div>
<div class="row__seat tooltip" data-tooltip="L6"></div>
<div class="row__seat tooltip" data-tooltip="L7"></div>
<div class="row__seat tooltip" data-tooltip="L8"></div>
<div class="row__seat tooltip" data-tooltip="L9"></div>
<div class="row__seat tooltip" data-tooltip="L10"></div>
<div class="row__seat tooltip" data-tooltip="L11"></div>
<div class="row__seat tooltip" data-tooltip="L12"></div>
<div class="row__seat tooltip" data-tooltip="L13"></div>
<div class="row__seat row__seat--reserved"></div>
<div class="row__seat row__seat--reserved"></div>
<div class="row__seat row__seat--reserved"></div>
<div class="row__seat tooltip" data-tooltip="L17"></div>
<div class="row__seat tooltip" data-tooltip="L18"></div>
</div>
<div class="row">
<div class="row__seat tooltip" data-tooltip="M1"></div>
<div class="row__seat tooltip" data-tooltip="M2"></div>
<div class="row__seat tooltip" data-tooltip="M3"></div>
<div class="row__seat tooltip" data-tooltip="M4"></div>
<div class="row__seat tooltip" data-tooltip="M5"></div>
<div class="row__seat tooltip" data-tooltip="M6"></div>
<div class="row__seat tooltip" data-tooltip="M7"></div>
<div class="row__seat tooltip" data-tooltip="M8"></div>
<div class="row__seat tooltip" data-tooltip="M9"></div>
<div class="row__seat row__seat--reserved"></div>
<div class="row__seat row__seat--reserved"></div>
<div class="row__seat row__seat--reserved"></div>
<div class="row__seat row__seat--reserved"></div>
<div class="row__seat tooltip" data-tooltip="M14"></div>
<div class="row__seat tooltip" data-tooltip="M15"></div>
<div class="row__seat tooltip" data-tooltip="M16"></div>
<div class="row__seat tooltip" data-tooltip="M17"></div>
<div class="row__seat tooltip" data-tooltip="M18"></div>
</div>
<div class="row">
<div class="row__seat tooltip" data-tooltip="N1"></div>
<div class="row__seat tooltip" data-tooltip="N2"></div>
<div class="row__seat row__seat--reserved"></div>
<div class="row__seat row__seat--reserved"></div>
<div class="row__seat tooltip" data-tooltip="N5"></div>
<div class="row__seat tooltip" data-tooltip="N6"></div>
<div class="row__seat tooltip" data-tooltip="N7"></div>
<div class="row__seat tooltip" data-tooltip="N8"></div>
<div class="row__seat tooltip" data-tooltip="N9"></div>
<div class="row__seat tooltip" data-tooltip="N10"></div>
<div class="row__seat tooltip" data-tooltip="N11"></div>
<div class="row__seat tooltip" data-tooltip="N12"></div>
<div class="row__seat tooltip" data-tooltip="N13"></div>
<div class="row__seat tooltip" data-tooltip="N14"></div>
<div class="row__seat tooltip" data-tooltip="N15"></div>
<div class="row__seat tooltip" data-tooltip="N16"></div>
<div class="row__seat tooltip" data-tooltip="N17"></div>
<div class="row__seat tooltip" data-tooltip="N18"></div>
</div>
<div class="row">
<div class="row__seat tooltip" data-tooltip="O1"></div>
<div class="row__seat tooltip" data-tooltip="O2"></div>
<div class="row__seat tooltip" data-tooltip="O3"></div>
<div class="row__seat tooltip" data-tooltip="O4"></div>
<div class="row__seat tooltip" data-tooltip="O5"></div>
<div class="row__seat tooltip" data-tooltip="O6"></div>
<div class="row__seat tooltip" data-tooltip="O7"></div>
<div class="row__seat tooltip" data-tooltip="O8"></div>
<div class="row__seat tooltip" data-tooltip="O9"></div>
<div class="row__seat tooltip" data-tooltip="O10"></div>
<div class="row__seat tooltip" data-tooltip="O11"></div>
<div class="row__seat tooltip" data-tooltip="O12"></div>
<div class="row__seat tooltip" data-tooltip="O13"></div>
<div class="row__seat row__seat--reserved"></div>
<div class="row__seat row__seat--reserved"></div>
<div class="row__seat tooltip" data-tooltip="O16"></div>
<div class="row__seat tooltip" data-tooltip="O17"></div>
<div class="row__seat tooltip" data-tooltip="O18"></div>
</div>
<div class="row">
<div class="row__seat tooltip" data-tooltip="P1"></div>
<div class="row__seat tooltip" data-tooltip="P2"></div>
<div class="row__seat tooltip" data-tooltip="P3"></div>
<div class="row__seat tooltip" data-tooltip="P4"></div>
<div class="row__seat tooltip" data-tooltip="P5"></div>
<div class="row__seat tooltip" data-tooltip="P6"></div>
<div class="row__seat tooltip" data-tooltip="P7"></div>
<div class="row__seat tooltip" data-tooltip="P8"></div>
<div class="row__seat tooltip" data-tooltip="P9"></div>
<div class="row__seat tooltip" data-tooltip="P10"></div>
<div class="row__seat tooltip" data-tooltip="P11"></div>
<div class="row__seat tooltip" data-tooltip="P12"></div>
<div class="row__seat tooltip" data-tooltip="P13"></div>
<div class="row__seat tooltip" data-tooltip="P14"></div>
<div class="row__seat tooltip" data-tooltip="P15"></div>
<div class="row__seat tooltip" data-tooltip="P16"></div>
<div class="row__seat tooltip" data-tooltip="P17"></div>
<div class="row__seat tooltip" data-tooltip="P18"></div>
</div>
<div class="row">
<div class="row__seat tooltip" data-tooltip="Q1"></div>
<div class="row__seat tooltip" data-tooltip="Q2"></div>
<div class="row__seat tooltip" data-tooltip="Q3"></div>
<div class="row__seat tooltip" data-tooltip="Q4"></div>
<div class="row__seat tooltip" data-tooltip="Q5"></div>
<div class="row__seat tooltip" data-tooltip="Q6"></div>
<div class="row__seat tooltip" data-tooltip="Q7"></div>
<div class="row__seat tooltip" data-tooltip="Q8"></div>
<div class="row__seat tooltip" data-tooltip="Q9"></div>
<div class="row__seat tooltip" data-tooltip="Q10"></div>
<div class="row__seat tooltip" data-tooltip="Q11"></div>
<div class="row__seat tooltip" data-tooltip="Q12"></div>
<div class="row__seat tooltip" data-tooltip="Q13"></div>
<div class="row__seat tooltip" data-tooltip="Q14"></div>
<div class="row__seat tooltip" data-tooltip="Q15"></div>
<div class="row__seat tooltip" data-tooltip="Q16"></div>
<div class="row__seat tooltip" data-tooltip="Q17"></div>
<div class="row__seat tooltip" data-tooltip="Q18"></div>
</div>
<div class="row">
<div class="row__seat tooltip" data-tooltip="R1"></div>
<div class="row__seat tooltip" data-tooltip="R2"></div>
<div class="row__seat tooltip" data-tooltip="R3"></div>
<div class="row__seat tooltip" data-tooltip="R4"></div>
<div class="row__seat tooltip" data-tooltip="R5"></div>
<div class="row__seat tooltip" data-tooltip="R6"></div>
<div class="row__seat tooltip" data-tooltip="R7"></div>
<div class="row__seat tooltip" data-tooltip="R8"></div>
<div class="row__seat tooltip" data-tooltip="R9"></div>
<div class="row__seat tooltip" data-tooltip="R10"></div>
<div class="row__seat tooltip" data-tooltip="R11"></div>
<div class="row__seat tooltip" data-tooltip="R12"></div>
<div class="row__seat tooltip" data-tooltip="R13"></div>
<div class="row__seat tooltip" data-tooltip="R14"></div>
<div class="row__seat tooltip" data-tooltip="R15"></div>
<div class="row__seat tooltip" data-tooltip="R16"></div>
<div class="row__seat tooltip" data-tooltip="R17"></div>
<div class="row__seat tooltip" data-tooltip="R18"></div>
</div>
</div>
<!-- /rows -->
<ul class="legend">
<li class="legend__item legend__item--free">空闲</li>
<li class="legend__item legend__item--reserved">已售出</li>
<li class="legend__item legend__item--selected">可购买</li>
</ul>
<button class="action action--buy">买 票</button>
</div><!-- /plan -->
<button class="action action--lookaround action--disabled" arial-label="Unlook View"></button>
<script src="js/classie.js"></script>
<script src="js/main.js"></script>
</body>
</html>JS代码(main.js):
/** * main.js * http://www.codrops.com * * Licensed under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * Copyright 2015,Codrops * http://www.codrops.com */
;
(function(window){
'use strict';
/** * some helper functions */
/**********************************************/
/** https://gist.github.com/desandro/1866474 **/
/**********************************************/
var lastTime = 0;
var prefixes = 'webkit moz ms o'.split(' ');
// get unprefixed rAF and cAF,if presentvar requestAnimationFrame = window.requestAnimationFrame;
var cancelAnimationFrame = window.cancelAnimationFrame;
// loop through vendor prefixes and get prefixed rAF and cAFvar prefix;
for( var i = 0;
i < prefixes.length;
i++ ){
if ( requestAnimationFrame && cancelAnimationFrame ){
break;
}
prefix = prefixes[i];
requestAnimationFrame = requestAnimationFrame || window[ prefix + 'RequestAnimationFrame' ];
cancelAnimationFrame = cancelAnimationFrame || window[ prefix + 'CancelAnimationFrame' ] ||window[ prefix + 'CancelRequestAnimationFrame' ];
}
// fallback to setTimeout and clearTimeout if either request/cancel is not supportedif ( !requestAnimationFrame || !cancelAnimationFrame ){
requestAnimationFrame = function( callback,element ){
var currTime = new Date().getTime();
var timeToCall = Math.max( 0,16 - ( currTime - lastTime ) );
var id = window.setTimeout( function(){
callback( currTime + timeToCall );
}
,timeToCall );
lastTime = currTime + timeToCall;
return id;
}
;
cancelAnimationFrame = function( id ){
window.clearTimeout( id );
}
;
}
function throttle(fn,delay){
var allowSample = true;
return function(e){
if (allowSample){
allowSample = false;
setTimeout(function(){
allowSample = true;
}
,delay);
fn(e);
}
}
;
}
// from http://www.quirksmode.org/js/events_properties.html#positionfunction getMousePos(e){
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY){
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY){
posx = e.clientX + document.body.scrollLeft+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop+ document.documentElement.scrollTop;
}
return{
x:posx,y:posy}
}
// equation of a linefunction lineEq(y2,y1,x2,x1,currentVal){
// y = mx + bvar m = (y2 - y1) / (x2 - x1),b = y1 - m * x1;
return m * currentVal + b;
}
var support ={
transitions:Modernizr.csstransitions}
,transEndEventNames ={
'WebkitTransition':'webkitTransitionEnd','MozTransition':'transitionend','OTransition':'oTransitionEnd','msTransition':'MSTransitionEnd','transition':'transitionend'}
,transEndEventName = transEndEventNames[Modernizr.prefixed('transition')],onEndTransition = function(el,callback){
var onEndCallbackFn = function( ev ){
if( support.transitions ){
if( ev.target != this ) return;
this.removeEventListener( transEndEventName,onEndCallbackFn );
}
if( callback && typeof callback === 'function' ){
callback.call(this);
}
}
;
if( support.transitions ){
el.addEventListener( transEndEventName,onEndCallbackFn );
}
else{
onEndCallbackFn();
}
}
,// main containercontainer = document.querySelector('.container'),// the 3D element - the roomroom = container.querySelector('.cube'),// the seat rows inside the 3D elementrows = [].slice.call(room.querySelectorAll('.rows > .row')),// total amount of rowstotalRows = rows.length,// seatsseats = [].slice.call(room.querySelectorAll('.row__seat')),// the plan/mapplan = document.querySelector('.plan'),// seats on the plan/mapplanseats = [].slice.call(plan.querySelectorAll('.row__seat')),// the screenmonitor = room.querySelector('.screen'),// the video elementvideo = monitor.querySelector('video'),// play video controlplayCtrl = monitor.querySelector('button.action--play'),// intro elementintro = monitor.querySelector('.intro'),// 'select your seats' controlselectSeatsCtrl = intro.querySelector('button.action--seats'),// the tilt controltiltCtrl = document.querySelector('.action--lookaround'),// how much the camera rotates when the user moves the mousetiltRotation ={
rotateX:25,// a relative rotation of -25deg to 25deg on the x-axisrotateY:15 // a relative rotation of -15deg to 15deg on the y-axis}
,// controls whether the tilt is active or nottilt = false,// window sizeswinsize ={
width:window.innerWidth,height:window.innerHeight}
,// width of one seatseat_width = seats[0].offsetWidth,// number of seats per rowseats_row = rows[0].children.length,// the sum of the room´s left margin with the room´s right margin is four times the width of a seatside_margin = 4 * seat_width,// if the following is changed,the CSS values also need to be adjusted (and vice-versa)// distance from first row to the screenrow_front_gap = 800,// distance between rowsrow_back = 100,// the gap of seats in the middle of the room (equivalent to two columns of seats)row_gap_amount = 2,// perspective valueperspective = 2000,// transition settings for the room animations (moving camera to seat)transitionOpts ={
'speed':1000,'easing':'cubic-bezier(.7,0,.3,1)'}
,// the room dimentionsroomsize ={
x:seats_row * seat_width + side_margin + row_gap_amount * seat_width,y:1000,// SCSS $cube_yz:3000 // SCSS $cube_z}
,// the initial values for the room transforminitTransform ={
translateX:0,translateY:roomsize.y/3.5,// view from top..translateZ:0,rotateX:-15,// ..looking downrotateY:0}
,// the current room transformroomTransform = initTransform;
function init(){
// scale room to fit viewportscaleRoom();
// initial view (zoomed screen)applyRoomTransform({
'translateX':0,'translateY':0,'translateZ':1300,'rotateX':0,'rotateY':0}
);
// bind eventsinitEvents();
}
function applyRoomTransform(transform){
room.style.WebkitTransform = room.style.transform = transform ? 'translate3d(0,0,' + perspective + 'px) rotate3d(1,0,0,' + transform.rotateX + 'deg) rotate3d(0,1,0,' + transform.rotateY + 'deg) translate3d(' + transform.translateX + 'px,' + transform.translateY + 'px,' + transform.translateZ + 'px)':'translate3d(0,0,' + perspective + 'px) rotate3d(1,0,0,' + roomTransform.rotateX + 'deg) rotate3d(0,1,0,' + roomTransform.rotateY + 'deg) translate3d(' + roomTransform.translateX + 'px,' + roomTransform.translateY + 'px,' + roomTransform.translateZ + 'px)';
}
function applyRoomTransition(settings){
var settings = settings || transitionOpts;
room.style.WebkitTransition = '-webkit-transform ' + settings.speed + 'ms ' + settings.easing;
room.style.transition = 'transform ' + settings.speed + 'ms ' + settings.easing;
}
function removeRoomTransition(){
room.style.WebkitTransition = room.style.transition = 'none';
}
function scaleRoom(){
var factor = winsize.width / roomsize.x;
container.style.WebkitTransform = container.style.transform = 'scale3d(' + factor + ',' + factor + ',1)';
}
function initEvents(){
// select a seatvar onSeatSelect = function(ev){
selectSeat(ev.target);
}
;
planseats.forEach(function(planseat){
planseat.addEventListener('click',onSeatSelect);
}
);
// enabling/disabling the tiltvar onTiltCtrlClick = function(){
// if tilt is enabled..if( tilt ){
disableTilt();
}
else{
enableTilt();
}
}
;
tiltCtrl.addEventListener('click',onTiltCtrlClick);
// mousemove event / tilt functionalityvar onMouseMove = function(ev){
requestAnimationFrame(function(){
if( !tilt ) return false;
var mousepos = getMousePos(ev),// transform valuesrotX = tiltRotation.rotateX ? roomTransform.rotateX - (2 * tiltRotation.rotateX / winsize.height * mousepos.y - tiltRotation.rotateX):0,rotY = tiltRotation.rotateY ? roomTransform.rotateY + (2 * tiltRotation.rotateY / winsize.width * mousepos.x - tiltRotation.rotateY):0;
// apply transformapplyRoomTransform({
'translateX':roomTransform.translateX,'translateY':roomTransform.translateY,'translateZ':roomTransform.translateZ,'rotateX':rotX,'rotateY':rotY}
);
}
);
}
;
document.addEventListener('mousemove',onMouseMove);
// select seats control click (intro button):show the room layoutvar onSelectSeats = function(){
classie.remove(intro,'intro--shown');
classie.add(plan,'plan--shown');
classie.add(playCtrl,'action--faded');
zoomOutScreen(function(){
showTiltCtrl();
}
);
}
;
selectSeatsCtrl.addEventListener('click',onSelectSeats);
// play videoplayCtrl.addEventListener('click',videoPlay);
// ended video eventvideo.addEventListener('ended',videoLoad);
// window resize:update window sizewindow.addEventListener('resize',throttle(function(ev){
winsize ={
width:window.innerWidth,height:window.innerHeight}
;
scaleRoom();
}
,10));
}
function showTiltCtrl(){
classie.add(tiltCtrl,'action--shown');
}
// select a seat on the seat planfunction selectSeat(planseat){
if( classie.has(planseat,'row__seat--reserved') ){
return false;
}
if( classie.has(planseat,'row__seat--selected') ){
classie.remove(planseat,'row__seat--selected');
return false;
}
// add selected classclassie.add(planseat,'row__seat--selected');
// the real seatvar seat = seats[planseats.indexOf(planseat)];
// show the seat´s perspectivepreviewSeat(seat);
}
// preview perspective from the selected seat. Moves the camera to that position.function previewSeat(seat){
// disable tiltdisableTilt();
// change transition propertiesapplyRoomTransition();
// getComputedStyle:https://css-tricks.com/get-value-of-css-rotation-through-javascript/var st = window.getComputedStyle(seat.parentNode,null),tr = st.getPropertyValue('-webkit-transform') || st.getPropertyValue('-moz-transform') || st.getPropertyValue('-ms-transform') || st.getPropertyValue('-o-transform') || st.getPropertyValue('transform') || 'Either no transform set,or browser doesn´t do getComputedStyle';
if( tr === 'none' ) return;
var values = tr.split('(')[1],values = values.split(')')[0],values = values.split(','),// translateY value of this seat´s rowy = values[13],// translateZ value of this seat´s rowz = values[14],// seat´s center point (x-axis)seatCenterX = seat.offsetLeft + side_margin/2 + seat.offsetWidth/2,// translateX,translateY and translateZ valuestx = seatCenterX < roomsize.x/2 ? initTransform.translateX + (roomsize.x/2 - seatCenterX):initTransform.translateX - (seatCenterX - roomsize.x/2),ty = roomsize.y/2 - (roomsize.y - Math.abs(y)) + seat.offsetHeight + 10,// add a small extratz = Math.abs(z)+10,// add a small extra// calculate how much to rotate in the x-axis (the more close to the screen the more we need to rotate)firstRowZ = roomsize.z - row_front_gap,lastRowZ = firstRowZ - (totalRows - 1 + row_gap_amount) * row_back,// calculate how much to rotate in the y-axis (the more close to the screen the more we need to rotate.// Also the same applies when the distance from the center of the room to both sides increases.// for the last row:minRotY_1 = 0,maxRotY_1 = 20,// min and max values for y rotationinitialTranslationX = 0,finalTranslationX = roomsize.x/2,rotY_1 = lineEq(minRotY_1,maxRotY_1,initialTranslationX,finalTranslationX,tx),// for the first row:minRotY_2 = 0,maxRotY_2 = 50,// min and max values for y rotationrotY_2 = lineEq(minRotY_2,maxRotY_2,initialTranslationX,finalTranslationX,tx),// final:rotY = lineEq(rotY_1,rotY_2,lastRowZ,firstRowZ,Math.abs(z));
// room transformsroomTransform ={
translateX:tx,translateY:ty,translateZ:tz,rotateX:0,//rotX,rotateY:rotY}
;
// apply transformapplyRoomTransform();
onEndTransition(room,function(){
removeRoomTransition();
}
);
}
function zoomOutScreen(callback){
applyRoomTransition({
'speed':1500,'easing':'ease'}
);
applyRoomTransform(initTransform);
onEndTransition(room,function(){
removeRoomTransition();
callback.call();
}
);
}
function disableTilt(){
classie.add(tiltCtrl,'action--disabled');
tilt = false;
}
function enableTilt(){
classie.remove(tiltCtrl,'action--disabled');
tilt = true;
}
function videoPlay(){
// hide the play controlclassie.remove(playCtrl,'action--shown');
video.currentTime = 0;
video.play();
}
function videoLoad(){
// show the play controlclassie.add(playCtrl,'action--shown');
video.load();
}
init();
}
)(window);
JS代码(modernizr-custom.js):
/*! modernizr 3.2.0 (Custom Build) | MIT * * http://modernizr.com/download/?-csstransitions-preserve3d-prefixed-setclasses !*/
!function(e,n,t){
function r(e,n){
return typeof e===n}
function o(){
var e,n,t,o,s,i,a;
for(var f in C)if(C.hasOwnProperty(f)){
if(e=[],n=C[f],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(t=0;
t<n.options.aliases.length;
t++)e.push(n.options.aliases[t].toLowerCase());
for(o=r(n.fn,"function")?n.fn():n.fn,s=0;
s<e.length;
s++)i=e[s],a=i.split("."),1===a.length?Modernizr[a[0]]=o:(!Modernizr[a[0]]||Modernizr[a[0]]instanceof Boolean||(Modernizr[a[0]]=new Boolean(Modernizr[a[0]])),Modernizr[a[0]][a[1]]=o),g.push((o?"":"no-")+a.join("-"))}
}
function s(e){
var n=w.className,t=Modernizr._config.classPrefix||"";
if(x&&(n=n.baseVal),Modernizr._config.enableJSClass){
var r=new RegExp("(^|\\s)"+t+"no-js(\\s|$)");
n=n.replace(r,"$1"+t+"js$2")}
Modernizr._config.enableClasses&&(n+=" "+t+e.join(" "+t),x?w.className.baseVal=n:w.className=n)}
function i(e){
return e.replace(/([a-z])-([a-z])/g,function(e,n,t){
return n+t.toUpperCase()}
).replace(/^-/,"")}
function a(e,n){
return!!~(""+e).indexOf(n)}
function f(){
return"function"!=typeof n.createElement?n.createElement(arguments[0]):x?n.createElementNS.call(n,"http://www.w3.org/2000/svg",arguments[0]):n.createElement.apply(n,arguments)}
function l(e,n){
return function(){
return e.apply(n,arguments)}
}
function u(e,n,t){
var o;
for(var s in e)if(e[s]in n)return t===!1?e[s]:(o=n[e[s]],r(o,"function")?l(o,t||n):o);
return!1}
function p(e){
return e.replace(/([A-Z])/g,function(e,n){
return"-"+n.toLowerCase()}
).replace(/^ms-/,"-ms-")}
function d(){
var e=n.body;
return e||(e=f(x?"svg":"body"),e.fake=!0),e}
function c(e,t,r,o){
var s,i,a,l,u="modernizr",p=f("div"),c=d();
if(parseInt(r,10))for(;
r--;
)a=f("div"),a.id=o?o[r]:u+(r+1),p.appendChild(a);
return s=f("style"),s.type="text/css",s.id="s"+u,(c.fake?c:p).appendChild(s),c.appendChild(p),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(n.createTextNode(e)),p.id=u,c.fake&&(c.style.background="",c.style.overflow="hidden",l=w.style.overflow,w.style.overflow="hidden",w.appendChild(c)),i=t(p,e),c.fake?(c.parentNode.removeChild(c),w.style.overflow=l,w.offsetHeight):p.parentNode.removeChild(p),!!i}
function m(n,r){
var o=n.length;
if("CSS"in e&&"supports"in e.CSS){
for(;
o--;
)if(e.CSS.supports(p(n[o]),r))return!0;
return!1}
if("CSSSupportsRule"in e){
for(var s=[];
o--;
)s.push("("+p(n[o])+":"+r+")");
return s=s.join(" or "),c("@supports ("+s+"){
#modernizr{
position:absolute;
}
}
",function(e){
return"absolute"==getComputedStyle(e,null).position}
)}
return t}
function v(e,n,o,s){
function l(){
p&&(delete N.style,delete N.modElem)}
if(s=r(s,"undefined")?!1:s,!r(o,"undefined")){
var u=m(e,o);
if(!r(u,"undefined"))return u}
for(var p,d,c,v,h,y=["modernizr","tspan"];
!N.style;
)p=!0,N.modElem=f(y.shift()),N.style=N.modElem.style;
for(c=e.length,d=0;
c>d;
d++)if(v=e[d],h=N.style[v],a(v,"-")&&(v=i(v)),N.style[v]!==t){
if(s||r(o,"undefined"))return l(),"pfx"==n?v:!0;
try{
N.style[v]=o}
catch(g){
}
if(N.style[v]!=h)return l(),"pfx"==n?v:!0}
return l(),!1}
function h(e,n,t,o,s){
var i=e.charAt(0).toUpperCase()+e.slice(1),a=(e+" "+b.join(i+" ")+i).split(" ");
return r(n,"string")||r(n,"undefined")?v(a,n,o,s):(a=(e+" "+P.join(i+" ")+i).split(" "),u(a,n,t))}
function y(e,n,r){
return h(e,t,t,n,r)}
var g=[],C=[],_={
_version:"3.2.0",_config:{
classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0}
,_q:[],on:function(e,n){
var t=this;
setTimeout(function(){
n(t[e])}
,0)}
,addTest:function(e,n,t){
C.push({
name:e,fn:n,options:t}
)}
,addAsyncTest:function(e){
C.push({
name:null,fn:e}
)}
}
,Modernizr=function(){
}
;
Modernizr.prototype=_,Modernizr=new Modernizr;
var w=n.documentElement,x="svg"===w.nodeName.toLowerCase(),S="Moz O ms Webkit",b=_._config.usePrefixes?S.split(" "):[];
_._cssomPrefixes=b;
var E=function(n){
var r,o=prefixes.length,s=e.CSSRule;
if("undefined"==typeof s)return t;
if(!n)return!1;
if(n=n.replace(/^@/,""),r=n.replace(/-/g,"_").toUpperCase()+"_RULE",r in s)return"@"+n;
for(var i=0;
o>i;
i++){
var a=prefixes[i],f=a.toUpperCase()+"_"+r;
if(f in s)return"@-"+a.toLowerCase()+"-"+n}
return!1}
;
_.atRule=E;
var P=_._config.usePrefixes?S.toLowerCase().split(" "):[];
_._domPrefixes=P;
var z={
elem:f("modernizr")}
;
Modernizr._q.push(function(){
delete z.elem}
);
var N={
style:z.elem.style}
;
Modernizr._q.unshift(function(){
delete N.style}
),_.testAllProps=h;
_.prefixed=function(e,n,t){
return 0===e.indexOf("@")?E(e):(-1!=e.indexOf("-")&&(e=i(e)),n?h(e,n,t):h(e,"pfx"))}
;
_.testAllProps=y,Modernizr.addTest("csstransitions",y("transition","all",!0)),Modernizr.addTest("preserve3d",y("transformStyle","preserve-3d")),o(),s(g),delete _.addTest,delete _.addAsyncTest;
for(var T=0;
T<Modernizr._q.length;
T++)Modernizr._q[T]();
e.Modernizr=Modernizr}
(window,document);
CSS代码(component.css):
/* two seats on each side for free space */
.container{position:relative;-webkit-perspective:2000px;perspective:2000px;width:100vw;height:100vh;}
.cube{position:absolute;top:50%;left:50%;margin:-500px 0 0 -960px;width:1920px;height:1000px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;}
.cube__side{position:absolute;display:block;}
.cube__side--front,.cube__side--back{width:1920px;height:1000px;}
.cube__side--left,.cube__side--right{background:#2b2b2d;width:3000px;/* depth */
height:1000px;}
.cube__side--top,.cube__side--bottom{width:1920px;height:3000px;/* depth */
}
.cube__side--back{background:#232325;box-shadow:0 0 0 1px #232325;-webkit-transform:translate3d(0,0,-3000px);transform:translate3d(0,0,-3000px);}
.cube__side--right{right:0;-webkit-transform:rotate3d(0,1,0,-90deg);transform:rotate3d(0,1,0,-90deg);-webkit-transform-origin:100% 50%;transform-origin:100% 50%;}
.cube__side--left{-webkit-transform:rotate3d(0,1,0,90deg);transform:rotate3d(0,1,0,90deg);-webkit-transform-origin:0 50%;transform-origin:0 50%;}
.cube__side--top{background:#272729;-webkit-transform:rotate3d(1,0,0,90deg) translate3d(0,-3000px,0);transform:rotate3d(1,0,0,90deg) translate3d(0,-3000px,0);-webkit-transform-origin:50% 0%;transform-origin:50% 0%;}
.rows--large{height:113px;left:160px;bottom:0;position:absolute;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;width:calc(100% - 320px);/* leave a margin */
}
.rows--mini{width:230px;margin:0 auto;}
.row{display:-webkit-flex;display:flex;width:100%;}
.rows--mini .row:nth-child(9){margin:0 0 15px 0;}
.rows--large .row{left:0;height:100%;position:absolute;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;}
.row__seat{-webkit-flex:none;flex:none;height:100%;margin:0;}
.rows--mini .row__seat{width:10px;height:10px;background:rgba(72,72,78,0.5);margin:1px;border-radius:1px;cursor:pointer;}
.rows--mini .row__seat:hover{background:#57e683;}
.rows--mini .row__seat--reserved,.rows--mini .row__seat--reserved:hover{background:#de6363;}
.rows--large .row__seat{width:80px;background:url(../img/seat.svg) no-repeat 50% 0;background-size:100%;}
.rows--mini .row__seat:nth-child(9){margin-right:15px;}
.rows--large .row__seat:nth-child(9){margin-right:160px;}
/* Row positioning */
.rows--large .row:nth-child(1){-webkit-transform:translate3d(0,0px,-2200px);transform:translate3d(0,0px,-2200px);}
.rows--large .row:nth-child(2){-webkit-transform:translate3d(0,-18px,-2100px);transform:translate3d(0,-18px,-2100px);}
.rows--large .row:nth-child(3){-webkit-transform:translate3d(0,-36px,-2000px);transform:translate3d(0,-36px,-2000px);}
.rows--large .row:nth-child(4){-webkit-transform:translate3d(0,-54px,-1900px);transform:translate3d(0,-54px,-1900px);}
.rows--large .row:nth-child(5){-webkit-transform:translate3d(0,-72px,-1800px);transform:translate3d(0,-72px,-1800px);}
.rows--large .row:nth-child(6){-webkit-transform:translate3d(0,-90px,-1700px);transform:translate3d(0,-90px,-1700px);}
.rows--large .row:nth-child(7){-webkit-transform:translate3d(0,-108px,-1600px);transform:translate3d(0,-108px,-1600px);}
.rows--large .row:nth-child(8){-webkit-transform:translate3d(0,-126px,-1500px);transform:translate3d(0,-126px,-1500px);}
.rows--large .row:nth-child(9){-webkit-transform:translate3d(0,-144px,-1400px);transform:translate3d(0,-144px,-1400px);}
/* Second back row set of seats (starting point needs to have the previous sums of the Y and Z translates) */
.rows--large .row:nth-child(10){-webkit-transform:translate3d(0,-198px,-1100px);transform:translate3d(0,-198px,-1100px);}
.rows--large .row:nth-child(11){-webkit-transform:translate3d(0,-216px,-1000px);transform:translate3d(0,-216px,-1000px);}
.rows--large .row:nth-child(12){-webkit-transform:translate3d(0,-234px,-900px);transform:translate3d(0,-234px,-900px);}
.rows--large .row:nth-child(13){-webkit-transform:translate3d(0,-252px,-800px);transform:translate3d(0,-252px,-800px);}
.rows--large .row:nth-child(14){-webkit-transform:translate3d(0,-270px,-700px);transform:translate3d(0,-270px,-700px);}
.rows--large .row:nth-child(15){-webkit-transform:translate3d(0,-288px,-600px);transform:translate3d(0,-288px,-600px);}
.rows--large .row:nth-child(16){-webkit-transform:translate3d(0,-306px,-500px);transform:translate3d(0,-306px,-500px);}
.rows--large .row:nth-child(17){-webkit-transform:translate3d(0,-324px,-400px);transform:translate3d(0,-324px,-400px);}
.rows--large .row:nth-child(18){-webkit-transform:translate3d(0,-342px,-300px);transform:translate3d(0,-342px,-300px);}
.plan{top:0;right:0;padding:10px 20px;position:fixed;z-index:1000;-webkit-transform:scale3d(1,1,1) translate3d(100%,0,0);transform:scale3d(1,1,1) translate3d(100%,0,0);/* scale avoids flickering */
-webkit-transition:-webkit-transform 0.6s;transition:transform 0.6s;}
.plan--shown{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);/* scale avoids flickering */
}
.plan__title{text-align:center;font-size:1em;margin:0.25em 0 0.5em;}
.legend{list-style:none;margin:1em 0 0 0;padding:0;text-align:center;}
.legend__item{font-size:0.85em;font-weight:bold;margin:0 9px 0 0;display:inline-block;}
.legend__item::before{content:'';width:10px;height:10px;display:inline-block;margin:0 5px 0 0;border-radius:2px;background:rgba(72,72,78,0.5);}
.legend__item--reserved::before{background:#de6363;}
.legend__item--selected::before,.rows--mini .row__seat--selected,.rows--mini .row__seat--selected:hover{background:#21c252;}
/* Tooltip */
.tooltip{position:relative;display:inline-block;}
.tooltip::before,.tooltip::after{position:absolute;opacity:0;pointer-events:none;left:50%;}
.tooltip:hover::before,.tooltip:hover::after{opacity:1;-webkit-transition:opacity 0.3s ease,-webkit-transform 0.3s ease;transition:opacity 0.3s ease,transform 0.3s ease;-webkit-transition-delay:0.1s;transition-delay:0.1s;}
.tooltip::before{bottom:100%;border:solid transparent;content:'';height:0;width:0;z-index:1001;pointer-events:none;border-color:transparent;border-top-color:#57e683;border-width:6px;margin-left:-6px;-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0);}
.tooltip:hover::before{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
.tooltip::after{content:attr(data-tooltip);background:#57e683;border-radius:3px;color:#fff;font-weight:bold;z-index:1000;font-size:14px;padding:8px 10px;bottom:100%;box-shadow:4px 4px 8px rgba(0,0,0,0.3);-webkit-transform:translate3d(-50%,-5px,0);transform:translate3d(-50%,-5px,0);}
.tooltip:hover::after{-webkit-transform:translate3d(-50%,-10px,0);transform:translate3d(-50%,-10px,0);}
/* Screen & video */
.screen{position:relative;background:#6f6f7b;width:1280px;height:720px;margin:100px auto 0;overflow:hidden;border-radius:7px;}
.video{width:100%;height:100%;overflow:hidden;border-radius:7px;position:absolute;}
.video-player{width:100%;height:100%;margin:0;padding:0;position:absolute;top:0;border-radius:7px;}
.poster{position:absolute;width:100%;height:100%;background:url(../media/sintel.jpg) no-repeat center top;top:0;background-size:cover;z-index:10;}
.intro{position:absolute;width:100%;bottom:0;z-index:20;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;min-height:120px;background:#000;border-radius:0 0 7px 7px;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);-webkit-transition:-webkit-transform 0.3s;transition:transform 0.3s;}
.intro--shown{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
.intro__side{width:50%;padding:0em 1em;}
.intro__side:first-child{border-right:1px solid #121213;}
.intro__side:last-child{text-align:center;}
.intro__title{padding:0 0 0 3em;margin:0 0 0 0.75em;background:url(../img/camera.svg) no-repeat 0% 50%;background-size:auto 70%;}
.intro__up{display:block;font-size:0.65em;color:#393941;}
.intro__down{font-size:1.5em;font-weight:700;color:#adadad;}
.intro__partial{font-size:0.5em;color:#63636F;}
.action{border:none;padding:0;background:none;margin:0;font-size:2em;font-weight:700;color:#fff;}
.action:hover,.action:focus{outline:none;}
.action--seats{padding:0.5em 0 0.5em 2.5em;margin:0 0 0 1em;color:#21c252;margin:0 auto;display:inline-block;background:url(../img/seats.svg) no-repeat 0% 50%;background-size:auto 70%;}
.action--play{position:absolute;pointer-events:none;z-index:30;top:50%;left:50%;width:2.5em;height:2.5em;margin-top:-20px;opacity:0;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0);background:url(../img/play.svg) no-repeat 0% 50%;background-size:auto 100%;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;}
.action--lookaround{position:fixed;pointer-events:none;z-index:100;top:50%;left:50%;width:2em;height:2em;margin-top:-20px;opacity:0;-webkit-transform:translate3d(-50%,-50%,0) translate3d(0,10px,0);transform:translate3d(-50%,-50%,0) translate3d(0,10px,0);background:url(../img/lookaround.svg) no-repeat 50% 50%;background-size:auto 80%;border-radius:50%;border:4px solid transparent;-webkit-transition:opacity 0.3s,-webkit-transform 0.3s;transition:opacity 0.3s,transform 0.3s;}
.action--lookaround.action--disabled{border-color:rgba(72,72,78,0.5);}
.action--lookaround.action--shown{-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0);}
.action--shown{opacity:1;pointer-events:auto;}
.action--shown.action--faded{opacity:0.2;}
.action--buy{margin:1em auto;background:#26AD4F;font-size:1em;width:100%;padding:0.75em 1.5em;border-radius:3px;display:block;max-width:230px;}
.action--buy:hover{background:#21c252;}
/* Fallback */
.no-preserve3d .header{display:block;text-align:center;position:relative;padding:2em;background:transparent;}
.no-preserve3d .header__title{padding:1em 0 0;font-size:2em;}
.no-preserve3d .container{display:none;}
.no-preserve3d .plan{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);position:relative;margin:0 auto;}
@media screen and (max-width:50em),screen and (max-height:38em){.header{display:block;text-align:center;position:relative;padding:2em;background:transparent;}
.header__title{padding:1em 0 0;font-size:2em;}
.note--screen{display:block;}
.container{visibility:hidden;pointer-events:none;z-index:-1;position:absolute;}
.plan{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);position:relative;margin:0 auto;}
.rows--mini .row__seat:hover{background:rgba(72,72,78,0.5);}
.rows--mini .row__seat--selected:hover{background:#21c252;}
}
/*# sourceMappingURL=component.css.map */
CSS代码(demo.css):
@font-face{font-weight:normal;font-style:normal;font-family:'codropsicons';src:url('../fonts/codropsicons/codropsicons.eot');src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),url('../fonts/codropsicons/codropsicons.woff') format('woff'),url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');}
*,*:after,*:before{-webkit-box-sizing:border-box;box-sizing:border-box;}
.clearfix:before,.clearfix:after{display:table;content:'';}
.clearfix:after{clear:both;}
body{font-family:'Avenir Next',Avenir,'Helvetica Neue',Helvetica,Arial,sans-serif;color:#fff;background:#272729;height:100vh;overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
a{outline:none;color:#aaa;text-decoration:none;}
a:hover,a:focus{color:#fff;}
.hidden{position:absolute;overflow:hidden;width:0;height:0;pointer-events:none;}
/* Header */
.header{position:fixed;bottom:0;left:0;width:100%;z-index:10000;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;padding:1em;background:linear-gradient(to bottom,transparent,#000);background:rgba(24,24,28,0.3);font-size:0.85em;}
.header__title{font-size:1.25em;margin:0;padding:0;color:#5C5C64;}
.note{font-weight:bold;margin:0 0 0 auto;display:none;padding:0 0.5em;color:#de6363;}
.no-preserve3d .note--support{display:block;}
/* Top Navigation Style */
.codrops-links{position:relative;display:inline-block;text-align:center;white-space:nowrap;margin:0 0.75em 0 0;}
.codrops-links::after{position:absolute;top:0;left:50%;width:1px;height:100%;background:rgba(255,255,255,0.1);content:'';-webkit-transform:rotate3d(0,0,1,22.5deg);transform:rotate3d(0,0,1,22.5deg);}
.codrops-icon{display:inline-block;margin:0.5em;padding:0em 0;width:1.5em;text-decoration:none;}
.codrops-icon span{display:none;}
.codrops-icon:before{margin:0 5px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;font-family:'codropsicons';line-height:1;speak:none;-webkit-font-smoothing:antialiased;}
.codrops-icon--drop:before{content:"\e001";color:#0099cc;}
.codrops-icon--prev:before{content:"\e004";}
分享到QQ
分享到微博
微信扫一扫
