Home > Article > Web Front-end > CSS33D flip album
Transform attribute and transition attribute, combined with jQuery code to realize the flip function.
<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 2</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 3</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 4</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 5</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>3d翻转相册<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 6</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="jquery-3.0.0.min.js"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 7</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 8</span> <span style="background-color: #f5f5f5; color: #800000;"> .container </span><span style="background-color: #f5f5f5; color: #000000;">{</span> <span style="color: #008080;"> 9</span> <span style="background-color: #f5f5f5; color: #ff0000;"> position</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> relative</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 10</span> <span style="background-color: #f5f5f5; color: #ff0000;"> width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 560px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 11</span> <span style="background-color: #f5f5f5; color: #ff0000;"> height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 380px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 12</span> <span style="background-color: #f5f5f5; color: #ff0000;"> margin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0 auto</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 13</span> <span style="background-color: #f5f5f5; color: #000000;">}</span> <span style="color: #008080;"> 14</span> <span style="background-color: #f5f5f5; color: #800000;"> .items </span><span style="background-color: #f5f5f5; color: #000000;">{</span> <span style="color: #008080;"> 15</span> <span style="background-color: #f5f5f5; color: #ff0000;"> height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100%</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 16</span> <span style="background-color: #f5f5f5; color: #ff0000;"> margin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100px auto</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 17</span> <span style="background-color: #f5f5f5; color: #ff0000;"> transform-style</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> preserve-3d</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 18</span> <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">实现自动翻转效果,这里只设置翻转一次</span><span style="background-color: #f5f5f5; color: #008000;">*/</span> <span style="color: #008080;"> 19</span> <span style="background-color: #f5f5f5; color: #ff0000;"> animation</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> autoMove 3s 1 linear</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 20</span> <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">点击翻转 过渡效果</span><span style="background-color: #f5f5f5; color: #008000;">*/</span> <span style="color: #008080;"> 21</span> <span style="background-color: #f5f5f5; color: #ff0000;"> transition</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> all 0.5s</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 22</span> <span style="background-color: #f5f5f5; color: #000000;">}</span> <span style="color: #008080;"> 23</span> <span style="background-color: #f5f5f5; color: #800000;"> .item </span><span style="background-color: #f5f5f5; color: #000000;">{</span> <span style="color: #008080;"> 24</span> <span style="background-color: #f5f5f5; color: #ff0000;"> width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100%</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 25</span> <span style="background-color: #f5f5f5; color: #ff0000;"> height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100%</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 26</span> <span style="background-color: #f5f5f5; color: #ff0000;"> position</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> absolute</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 27</span> <span style="background-color: #f5f5f5; color: #ff0000;"> border</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 1px solid #c18</span><span style="background-color: #f5f5f5; color: #000000;">;<br> </span>
font-size: 50px;
<span style="color: #008080;"> 28</span> <span style="background-color: #f5f5f5; color: #000000;">}</span> <span style="color: #008080;"> 29</span> <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">设置不同的bgc,方便区分</span><span style="background-color: #f5f5f5; color: #008000;">*/</span> <span style="color: #008080;"> 30</span> <span style="background-color: #f5f5f5; color: #800000;"> .item:nth-child(1) </span><span style="background-color: #f5f5f5; color: #000000;">{</span> <span style="color: #008080;"> 31</span> <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">background-image: url("images/01.jpg");</span><span style="background-color: #f5f5f5; color: #008000;">*/</span> <span style="color: #008080;"> 32</span> <span style="background-color: #f5f5f5; color: #ff0000;"> background-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #cc1188</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 33</span> <span style="background-color: #f5f5f5; color: #000000;">}</span> <span style="color: #008080;"> 34</span> <span style="background-color: #f5f5f5; color: #800000;"> .item:nth-child(2) </span><span style="background-color: #f5f5f5; color: #000000;">{</span> <span style="color: #008080;"> 35</span> <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">background-image: url("images/02.jpg");</span><span style="background-color: #f5f5f5; color: #008000;">*/</span> <span style="color: #008080;"> 36</span> <span style="background-color: #f5f5f5; color: #ff0000;"> background-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #0094ff</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 37</span> <span style="background-color: #f5f5f5; color: #000000;">}</span> <span style="color: #008080;"> 38</span> <span style="background-color: #f5f5f5; color: #800000;"> .item:nth-child(3) </span><span style="background-color: #f5f5f5; color: #000000;">{</span> <span style="color: #008080;"> 39</span> <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">background-image: url("images/03.jpg");</span><span style="background-color: #f5f5f5; color: #008000;">*/</span> <span style="color: #008080;"> 40</span> <span style="background-color: #f5f5f5; color: #ff0000;"> background-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #22ff22</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 41</span> <span style="background-color: #f5f5f5; color: #000000;">}</span> <span style="color: #008080;"> 42</span> <span style="background-color: #f5f5f5; color: #800000;"> .item:nth-child(4) </span><span style="background-color: #f5f5f5; color: #000000;">{</span> <span style="color: #008080;"> 43</span> <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">background-image: url("images/04.jpg");</span><span style="background-color: #f5f5f5; color: #008000;">*/</span> <span style="color: #008080;"> 44</span> <span style="background-color: #f5f5f5; color: #ff0000;"> background-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #666666</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 45</span> <span style="background-color: #f5f5f5; color: #000000;">}</span> <span style="color: #008080;"> 46</span> <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">定义动画</span><span style="background-color: #f5f5f5; color: #008000;">*/</span> <span style="color: #008080;"> 47</span> <span style="background-color: #f5f5f5; color: #800000;"> @keyframes autoMove </span><span style="background-color: #f5f5f5; color: #000000;">{</span> <span style="color: #008080;"> 48</span> <span style="background-color: #f5f5f5; color: #ff0000;"> from { </span><span style="background-color: #f5f5f5; color: #000000;">}</span> <span style="color: #008080;"> 49</span> <span style="background-color: #f5f5f5; color: #800000;"> to </span><span style="background-color: #f5f5f5; color: #000000;">{</span> <span style="color: #008080;"> 50</span> <span style="background-color: #f5f5f5; color: #ff0000;"> transform</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> rotateX(360deg)</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 51</span> <span style="background-color: #f5f5f5; color: #000000;">}</span> <span style="color: #008080;"> 52</span> <span style="background-color: #f5f5f5; color: #800000;"> } </span><span style="color: #008080;"> 53</span> <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">设置左右翻页箭头样式</span><span style="background-color: #f5f5f5; color: #008000;">*/</span> <span style="color: #008080;"> 54</span> <span style="background-color: #f5f5f5; color: #800000;"> .left, .right </span><span style="background-color: #f5f5f5; color: #000000;">{</span> <span style="color: #008080;"> 55</span> <span style="background-color: #f5f5f5; color: #ff0000;"> width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 56</span> <span style="background-color: #f5f5f5; color: #ff0000;"> height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 57</span> <span style="background-color: #f5f5f5; color: #ff0000;"> line-height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 58</span> <span style="background-color: #f5f5f5; color: #ff0000;"> text-align</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> center</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 59</span> <span style="background-color: #f5f5f5; color: #ff0000;"> color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> white</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 60</span> <span style="background-color: #f5f5f5; color: #ff0000;"> font-size</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 61</span> <span style="background-color: #f5f5f5; color: #ff0000;"> background-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> darkslategray</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 62</span> <span style="background-color: #f5f5f5; color: #ff0000;"> opacity</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> .5</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 63</span> <span style="background-color: #f5f5f5; color: #ff0000;"> position</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> absolute</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 64</span> <span style="background-color: #f5f5f5; color: #ff0000;"> top</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50%</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 65</span> <span style="background-color: #f5f5f5; color: #ff0000;"> margin-top</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> -25px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 66</span> <span style="background-color: #f5f5f5; color: #ff0000;"> cursor</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> pointer</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 67</span> <span style="background-color: #f5f5f5; color: #000000;">}</span> <span style="color: #008080;"> 68</span> <span style="background-color: #f5f5f5; color: #800000;"> .left </span><span style="background-color: #f5f5f5; color: #000000;">{</span> <span style="color: #008080;"> 69</span> <span style="background-color: #f5f5f5; color: #ff0000;"> left</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> -25px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 70</span> <span style="background-color: #f5f5f5; color: #000000;">}</span> <span style="color: #008080;"> 71</span> <span style="background-color: #f5f5f5; color: #800000;"> .right </span><span style="background-color: #f5f5f5; color: #000000;">{</span> <span style="color: #008080;"> 72</span> <span style="background-color: #f5f5f5; color: #ff0000;"> right</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> -25px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 73</span> <span style="background-color: #f5f5f5; color: #000000;">}</span> <span style="color: #008080;"> 74</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 75</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 76</span> <span style="background-color: #f5f5f5; color: #000000;"> $(</span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> () { </span><span style="color: #008080;"> 77</span> <span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> itemNum </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> $(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">.items>.item</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">).length; </span><span style="color: #008080;"> 78</span> <span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> itemDeg </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #000000;">360</span> <span style="background-color: #f5f5f5; color: #000000;">/</span><span style="background-color: #f5f5f5; color: #000000;"> itemNum; </span><span style="color: #008080;"> 79</span> <span style="background-color: #f5f5f5; color: #000000;"> $(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">.items .item</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">).each(</span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> (index, element) { </span><span style="color: #008080;"> 80</span> <span style="background-color: #f5f5f5; color: #000000;"> $(element).css({ </span><span style="color: #008080;"> 81</span> <span style="background-color: #f5f5f5; color: #000000;"> transform: </span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">rotateX(</span><span style="background-color: #f5f5f5; color: #000000;">"</span> <span style="background-color: #f5f5f5; color: #000000;">+</span><span style="background-color: #f5f5f5; color: #000000;"> index </span><span style="background-color: #f5f5f5; color: #000000;">*</span><span style="background-color: #f5f5f5; color: #000000;"> itemDeg </span><span style="background-color: #f5f5f5; color: #000000;">+</span> <span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">deg) translateZ(190px)</span><span style="background-color: #f5f5f5; color: #000000;">"</span> <span style="color: #008080;"> 82</span> <span style="background-color: #f5f5f5; color: #000000;"> }); </span><span style="color: #008080;"> 83</span> <span style="background-color: #f5f5f5; color: #000000;"> }); </span><span style="color: #008080;"> 84</span> <span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> count </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">记录点击的次数,右击加1,左击减1</span> <span style="color: #008080;"> 85</span> <span style="background-color: #f5f5f5; color: #000000;"> $(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">.container .arrow .right</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">).click(</span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> () { </span><span style="color: #008080;"> 86</span> <span style="background-color: #f5f5f5; color: #000000;"> count</span><span style="background-color: #f5f5f5; color: #000000;">++</span><span style="background-color: #f5f5f5; color: #000000;">; </span><span style="color: #008080;"> 87</span> <span style="background-color: #f5f5f5; color: #000000;"> $(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">.items</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">).css({ </span><span style="color: #008080;"> 88</span> <span style="background-color: #f5f5f5; color: #000000;"> transform: </span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">rotateX(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">+-</span><span style="background-color: #f5f5f5; color: #000000;">90</span><span style="background-color: #f5f5f5; color: #000000;">*</span><span style="background-color: #f5f5f5; color: #000000;">count</span><span style="background-color: #f5f5f5; color: #000000;">+</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">deg)</span><span style="background-color: #f5f5f5; color: #000000;">"</span> <span style="color: #008080;"> 89</span> <span style="background-color: #f5f5f5; color: #000000;"> }); </span><span style="color: #008080;"> 90</span> <span style="color: #008080;"> 91</span> <span style="background-color: #f5f5f5; color: #000000;"> }); </span><span style="color: #008080;"> 92</span> <span style="background-color: #f5f5f5; color: #000000;"> $(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">.container .arrow .left</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">).click(</span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> () { </span><span style="color: #008080;"> 93</span> <span style="background-color: #f5f5f5; color: #000000;"> count</span><span style="background-color: #f5f5f5; color: #000000;">--</span><span style="background-color: #f5f5f5; color: #000000;">; </span><span style="color: #008080;"> 94</span> <span style="background-color: #f5f5f5; color: #000000;"> $(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">.items</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">).css({ </span><span style="color: #008080;"> 95</span> <span style="background-color: #f5f5f5; color: #000000;"> transform: </span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">rotateX(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">+-</span><span style="background-color: #f5f5f5; color: #000000;">90</span><span style="background-color: #f5f5f5; color: #000000;">*</span><span style="background-color: #f5f5f5; color: #000000;">count</span><span style="background-color: #f5f5f5; color: #000000;">+</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">deg)</span><span style="background-color: #f5f5f5; color: #000000;">"</span> <span style="color: #008080;"> 96</span> <span style="background-color: #f5f5f5; color: #000000;"> }); </span><span style="color: #008080;"> 97</span> <span style="background-color: #f5f5f5; color: #000000;"> }); </span><span style="color: #008080;"> 98</span> <span style="background-color: #f5f5f5; color: #000000;"> }); </span><span style="color: #008080;"> 99</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span> <span style="color: #008080;">100</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #008080;">101</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #008080;">102</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">></span> <span style="color: #008080;">103</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="items"</span><span style="color: #0000ff;">></span> <span style="color: #008080;">104</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="item"</span><span style="color: #0000ff;">></span>1<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #008080;">105</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="item"</span><span style="color: #0000ff;">></span>2<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #008080;">106</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="item"</span><span style="color: #0000ff;">></span>3<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #008080;">107</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="item"</span><span style="color: #0000ff;">></span>4<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #008080;">108</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #008080;">109</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="arrow"</span><span style="color: #0000ff;">></span> <span style="color: #008080;">110</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="left"</span><span style="color: #0000ff;">><</span><span style="color: #800000;"></div</span><span style="color: #0000ff;">></span> <span style="color: #008080;">111</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="right"</span><span style="color: #0000ff;">></span>><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #008080;">112</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #008080;">113</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #008080;">114</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #008080;">115</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>