CSS3 旋转3D立方体 - ︶ㄣ古剑丶魂

<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><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;"> 2</span> <span style="color: #0000ff;"><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 3</span> <span style="background-color: #f5f5f5; color: #800000;">  *</span><span style="background-color: #f5f5f5; color: #000000;">{</span>
<span style="color: #008080;"> 4</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;">0px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;"> 5</span> <span style="background-color: #f5f5f5; color: #ff0000;">    padding</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">0px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;"> 6</span>   <span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;"> 7</span>   
<span style="color: #008080;"> 8</span> <span style="background-color: #f5f5f5; color: #800000;">  @-webkit-keyframes anima</span><span style="background-color: #f5f5f5; color: #000000;">{</span>
<span style="color: #008080;"> 9</span> <span style="background-color: #f5f5f5; color: #ff0000;">    0%{
</span><span style="color: #008080;">10</span> <span style="background-color: #f5f5f5; color: #ff0000;">      -webkit-transform</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">rotateX(0deg) rotateY(0deg) rotateZ(0deg)</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">11</span> <span style="background-color: #f5f5f5; color: #ff0000;">      -webkit-transform-origin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">center center</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">12</span>     <span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;">13</span> <span style="background-color: #f5f5f5; color: #800000;">    100%</span><span style="background-color: #f5f5f5; color: #000000;">{</span>
<span style="color: #008080;">14</span> <span style="background-color: #f5f5f5; color: #ff0000;">      -webkit-transform</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">rotateX(180deg) rotateY(180deg) rotateZ(180deg)</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">15</span> <span style="background-color: #f5f5f5; color: #ff0000;">      -webkit-transform-origin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">center center</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">16</span>     <span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;">17</span> <span style="background-color: #f5f5f5; color: #800000;">  }
</span><span style="color: #008080;">18</span>   
<span style="color: #008080;">19</span> <span style="background-color: #f5f5f5; color: #800000;">  #box</span><span style="background-color: #f5f5f5; color: #000000;">{</span>
<span style="color: #008080;">20</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;">100px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">21</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;">100px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">22</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;">23</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;">0px auto</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">24</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;">25</span> <span style="background-color: #f5f5f5; color: #ff0000;">    -webkit-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;">26</span> <span style="background-color: #f5f5f5; color: #ff0000;">    -webkit-perspective</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">0px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">27</span> <span style="background-color: #f5f5f5; color: #ff0000;">    -moz-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;">28</span> <span style="background-color: #f5f5f5; color: #ff0000;">    -moz-perspective</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">0px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">29</span> <span style="background-color: #f5f5f5; color: #ff0000;">    -webkit-animation</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">anima 5s ease infinite</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">30</span> <span style="background-color: #f5f5f5; color: #ff0000;">    -moz-animation</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">anima 5s ease infinite</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">31</span>   <span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;">32</span>   
<span style="color: #008080;">33</span> <span style="background-color: #f5f5f5; color: #800000;">  .box</span><span style="background-color: #f5f5f5; color: #000000;">{</span>
<span style="color: #008080;">34</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;">100px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">35</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;">100px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">36</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;">100px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">37</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;">38</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;">39</span>   <span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;">40</span>   
<span style="color: #008080;">41</span> <span style="background-color: #f5f5f5; color: #800000;">  .box1</span><span style="background-color: #f5f5f5; color: #000000;">{</span>
<span style="color: #008080;">42</span> <span style="background-color: #f5f5f5; color: #ff0000;">    -webkit-transform</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">rotateY(90deg) translateZ(-50px)</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">43</span> <span style="background-color: #f5f5f5; color: #ff0000;">    -moz-transform</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">rotateY(90deg) translateZ(-50px)</span><span style="background-color: #f5f5f5; color: #000000;">;</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;">rgba(255,0,0,0.8)</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="color: #008080;">47</span> <span style="background-color: #f5f5f5; color: #800000;">  .box2</span><span style="background-color: #f5f5f5; color: #000000;">{</span>
<span style="color: #008080;">48</span> <span style="background-color: #f5f5f5; color: #ff0000;">    -webkit-transform</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">rotateY(90deg) translateZ(50px)</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">49</span> <span style="background-color: #f5f5f5; color: #ff0000;">    -moz-transform</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">rotateY(90deg) translateZ(50px)</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">50</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;">rgba(0,255,0,0.8)</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="color: #008080;">53</span> <span style="background-color: #f5f5f5; color: #800000;">  .box3</span><span style="background-color: #f5f5f5; color: #000000;">{</span>
<span style="color: #008080;">54</span> <span style="background-color: #f5f5f5; color: #ff0000;">    -webkit-transform</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">rotateX(90deg) translateZ(50px)</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">55</span> <span style="background-color: #f5f5f5; color: #ff0000;">    -moz-transform</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">rotateX(90deg) translateZ(50px)</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">56</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;">rgba(0,0,255,0.8)</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">57</span>   <span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;">58</span>   
<span style="color: #008080;">59</span> <span style="background-color: #f5f5f5; color: #800000;">  .box4</span><span style="background-color: #f5f5f5; color: #000000;">{</span>
<span style="color: #008080;">60</span> <span style="background-color: #f5f5f5; color: #ff0000;">    -webkit-transform</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">rotateX(90deg) translateZ(-50px)</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">61</span> <span style="background-color: #f5f5f5; color: #ff0000;">    -moz-transform</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">rotateX(90deg) translateZ(-50px)</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">62</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;">rgba(255,255,0,0.8)</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">63</span>   <span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;">64</span>   
<span style="color: #008080;">65</span> <span style="background-color: #f5f5f5; color: #800000;">  .box5</span><span style="background-color: #f5f5f5; color: #000000;">{</span>
<span style="color: #008080;">66</span> <span style="background-color: #f5f5f5; color: #ff0000;">    -webkit-transform</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">translateZ(-50px)</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">67</span> <span style="background-color: #f5f5f5; color: #ff0000;">    -moz-transform</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">translateZ(-50px)</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">68</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;">rgba(255,0,255,0.8)</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">69</span>   <span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;">70</span>   
<span style="color: #008080;">71</span> <span style="background-color: #f5f5f5; color: #800000;">  .box6</span><span style="background-color: #f5f5f5; color: #000000;">{</span>
<span style="color: #008080;">72</span> <span style="background-color: #f5f5f5; color: #ff0000;">    -webkit-transform</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">translateZ(50px)</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">73</span> <span style="background-color: #f5f5f5; color: #ff0000;">    -moz-transform</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">translateZ(50px)</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">74</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;">rgba(0,255,255,0.8)</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">75</span>   <span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;">76</span> <span style="color: #0000ff;"></span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">77</span> 
<span style="color: #008080;">78</span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="box"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">79</span>   <span style="color: #0000ff;"><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box box1"</span><span style="color: #0000ff;">></span>左面<span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">80</span>   <span style="color: #0000ff;"><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box box2"</span><span style="color: #0000ff;">></span>右面<span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">81</span>   <span style="color: #0000ff;"><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box box3"</span><span style="color: #0000ff;">></span>顶面<span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">82</span>   <span style="color: #0000ff;"><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box box4"</span><span style="color: #0000ff;">></span>底面<span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">83</span>   <span style="color: #0000ff;"><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box box5"</span><span style="color: #0000ff;">></span>背面<span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">84</span>   <span style="color: #0000ff;"><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box box6"</span><span style="color: #0000ff;">></span>正面<span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">85</span> <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span>