Question

我正在开发一个项目，使用HTML DOM将CSS3多维数据集置于另一个CSS3多维数据集（onclick）之上（是的，我知道画布更好），

这段代码就是我现在所拥有的：

<html>
<section>
    <head>
        <meta charset="utf-8">
        <title>Example</title>
        <link rel="stylesheet" type="text/css" href="index_stylesheet_files/index_stylesheet_file_01.css">
        <script rel="javascript" type="text/javascript" src="index_javascript_files/index_javascript_file_01.js"></script>
    </head>
</section>

<section>
    <head>

        <!-- this is the center cube, where all cubes are 'build' around -->

        <div class="cube">
            <div class="inner_center_cube">
                <!-- front side -->
                <div class="side_01_center_cube" onclick="place_cube_side_01_10_00_00()" style="background-color: red; transform: rotateY(0deg) translateZ(50px)      " ></div>
                <!-- back side -->
                <div class="side_02_center_cube" onclick="place_cube_side_02_01_00_00()" style="background-color: blue; transform: rotateX(180deg) translateZ(50px)   " ></div>
                <!-- left side -->
                <div class="side_03_center_cube" onclick="place_cube_side_03_00_10_00()" style="background-color: green; transform: rotateY(90deg) translateZ(50px)   " ></div>
                <!-- right side -->
                <div class="side_04_center_cube" onclick="place_cube_side_04_00_01_00()" style="background-color: yellow; transform: rotateY(-90deg) translateZ(50px) " ></div>
                <!-- top side -->
                <div class="side_05_center_cube" onclick="place_cube_side_01_00_00_10()" style="background-color: orange; transform: rotateX(90deg) translateZ(50px)  " ></div>
                <!-- bottom side -->
                <div class="side_06_center_cube" onclick="place_cube_side_06_00_00_01()" style="background-color: brown; transform: rotateX(-90deg) translateZ(50px)  " ></div>
            </div>
        </head>
    </div>
</section>

<section>
    <head>
        <script rel="javascript" type="text/javascript">

            function place_cube_side_01_10_00_00() // function for placing the cube on 'top' of the other cube,
                                                   // there are also functions for other sides as well
            {
                $('<div style="perspective: 800px; perspective-origin: 50% 100px"'                                                                                                                                           +
                  '<div class="inner_top_cube" style="width: 100px; transform-style: preserve-3d; transform: rotateX(-45deg) translateZ(100px);">'                                                                                                                                 +
                  // front side //
                  '<div class="side_01_top_cube" onclick="place_cube_side_01_10_00_00()" style="background-color: red; transform: rotateY(0deg) translateZ(50px); position: absolute; width: 100px; height: 100px; "></div>' +
                  // back side //
                  '<div class="side_02_top_cube" onclick="place_cube_side_02_01_00_00()" style="background-color: blue; transform: rotateX(180deg) translateZ(50px); position: absolute; width: 100px; height: 100px; "></div>' +
                  // left side //
                  '<div class="side_03_top_cube" onclick="place_cube_side_03_00_10_00()" style="background-color: green; transform: rotateY(90deg) translateZ(50px); position: absolute; width: 100px; height: 100px; "></div>' +
                  // right side //
                  '<div class="side_04_top_cube" onclick="place_cube_side_04_00_01_00()" style="background-color: yellow; transform: rotateY(-90deg) translateZ(50px); position: absolute; width: 100px; height: 100px; "></div>' +
                  // top side //
                  '<div class="side_05_top_cube" onclick="place_cube_side_01_10_00_00()" style="background-color: orange; transform: rotateX(90deg) translateZ(50px);  "></div>' +
                  // bottom side //
                  '<div class="side_06_top_cube" onclick="place_cube_side_06_00_00_01()" style="background-color: brown; transform: rotateX(-90deg) translateZ(50px);  "></div>' +
                  '</div>'                                                                                                                                                       +
                  '</div>'                                                                                                                                                                                                                                                                                                                               
                 ).insertAfter('.cube');

            }

        </script>
    </head>
</section>

唯一的问题是顶部的第二个立方体向用户旋转45度，有些向右旋转：

example

它需要完美地贴合在底部立方体的顶部。怎么做？

如何将CSS3多维数据集放在另一个上面

0 个答案: