如何使用HTML和CSS创建多维数据集？

Question

我有这个，我希望使用HTML＆amp;仅限CSS ，如上图所示。我最好的try：

＆＃13;

＆＃13;

.mainDiv{
  position: relative;
  width: 206px;
  height: 190px;
  margin: 0px auto;
  margin-top:100px;
}
.square{
  width:100px;
  height:100px;
  background:#c52329;
  border:solid 2px #FFF;
  float:left;
  transform: skew(180deg,210deg);
  position: absolute;
  top: 43px;
}
.square2{
  width:100px;
  height:100px;
  background:#c52329;
  border:solid 2px #FFF;
  float:left;
  transform: skew(180deg,150deg);
  position: absolute;
  left:102px;
  top: 43px;
}
.square3{
  width:100px;
  height:100px;
  background:#c52329;
  border:solid 2px #FFF;
  float:left;
  transform: skew(180deg,180deg);
  position: absolute;
  left: 51px;
  top: -61px;
}

＆＃13;

<div class="mainDiv">
  <div class="square"></div>
  <div class="square2"></div>
  <div class="square3"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

根据您的HTML，我得到this JSFiddle。我刚刚玩declare @tags1 nvarchar(max) declare @blockcount int declare @blockstring nvarchar(max) declare @blogcount_out int; set @blockstring= 'SELECT @blogcount = count(*) FROM UserDocuments' EXECUTE sp_executesql @blockstring, N'@blogcount int output', @blogcount = @blogcount_out output select @blogcount_out 。

transform

.mainDiv{
  position: relative;
  width: 206px;
  height: 190px;
  margin: 0px auto;
  margin-top:100px;
}
.square{
  width:100px;
  height:100px;
  background:#c52329;
  border:solid 2px #FFF;
  transform: skew(180deg,210deg);
  position: absolute;
  top: 43px;
}
.square2{
  width:100px;
  height:100px;
  background:#c52329;
  border:solid 2px #FFF;
  transform: skew(180deg,150deg);
  position: absolute;
  left:102px;
  top: 43px;
}
.square3{
  width:114px;
  height:100px;
  background:#c52329;
  border:solid 2px #FFF;
 

transform: rotate(150deg) translate(-40px, -16px) skew(30deg, 0deg);
  position: absolute;
  left: 0px;
  top: -32px;
}

更新了CSS

<div class="mainDiv">
  <div class="square"></div>
  <div class="square2"></div>
  <div class="square3"></div>
</div>

我用这个改变了CSS。

额外： David Walsh has a cool animated version on an cube。除了它看起来有点酷之外，通过摆弄设置你可以学到很多东西。

Answer 2

您还可以使用 3d转换来实现多维数据集。这将为您的立方体提供更逼真的视角。好像立方体是一个真正的3d形状：

在下文中，我使用了一个带有2个伪元素的div：

＆＃13;

＆＃13;

body {
  perspective: 900px;
  padding-bottom:50%;
}
div {
  position: relative;
  width: 20%;
  padding-bottom: 20%;
  margin: 0 auto;
  transform-style: preserve-3d;
  background: #C52329;
  transform: rotateX(60deg) rotatez(45deg);
}
div:before, div:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: -2% -2%;
  background: inherit;
}
div:before {
  top: 104%; left: 0;
  transform: rotateX(-90deg);
}
div:after {
  top: 0; left: 104%;
  transform: rotateY(90deg);
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

CSS 3d cube with 6 faces

这种技术可以让你创造一个真实的立方体。有6张脸：

＆＃13;

＆＃13;

body{
  perspective-origin:50% -100%;
  perspective: 900px;
  overflow:hidden;
}
h1{position:absolute;font-family:sans-serif;}
.cube {
  position:relative;
  padding-bottom:20%;
  transform-style: preserve-3d;
  transform-origin: 50% 100%;
  transform:rotateY(45deg) rotateX(0);
  transition:transform 3s;
}
.cubeFace {
  position: absolute;
  left:40%;top:0;
  width: 20%;height:100%;
  margin: 0 auto;
  transform-style: inherit;
  background: #C52329;
  box-shadow:inset 0 0 0 5px #fff; 
  transform-origin:50% 50%;
  transform: rotateX(90deg);
  backface-visibility:hidden;
}
.face2{
  transform-origin:50% 50%;
  transform: rotatez(90deg) translateX(100%) rotateY(90deg);
}
.cubeFace:before, .cubeFace:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin:0 0;
  background: inherit;
  box-shadow:inherit;
  backface-visibility:inherit;
}
.cubeFace:before {
  top: 100%; left: 0;
  transform: rotateX(-90deg);
}
.cubeFace:after {
  top: 0; left: 100%;
  transform: rotateY(90deg);
}

body:hover .cube{
  transform:rotateY(405deg) rotateX(360deg);
}

＆＃13;

<h1>Hover me:</h1>
<div class="cube">
  <div class="cubeFace"></div>
  <div class="cubeFace face2"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

请注意，我没有在示例中添加供应商前缀。有关浏览器支持以及根据目标受众需要的供应商前缀的详细信息，请参阅canIuse for 3d transforms。

Answer 3

基本上，你想做2次转换：

1. 旋转矩形
2. 挤压它（歪斜）

所以基本上，你需要做一个transform: rotate(x) skew(y, y)并玩一下大小和放置。

这是我根据您自己的演示创建的一个小演示：

（我确实删除了边框，因为他们觉得我不需要）

.mainDiv{
  position: relative;
  width: 206px;
  height: 190px;
  margin: 0px auto;
  margin-top:100px;
}
.square{
  width:100px;
  height:100px;
  background:#c52329;
  float:left;
  transform: skew(180deg,210deg);
  position: absolute;
  top: 43px;
}
.square2{
  width:100px;
  height:100px;
  background:#c52329;
  float:left;
  transform: skew(180deg,150deg);
  position: absolute;
  left:102px;
  top: 43px;
}
.square3{
  width:110px;
  height:110px;
  background:#c52329;
  float:left;
  transform: rotate(45deg) skew(-15deg, -15deg);
  position: absolute;
  left: 46px;
  top: -42px;
}

<div class="mainDiv">
  <div class="square"></div>
  <div class="square2"></div>
  <div class="square3"></div>
</div>

Answer 4

首先我要指出，skew角度应介于-90deg和90deg之间，不包含在内。你所有的歪斜都超出了这个范围。

将自己限制在合理的偏斜数字上，结果很简单：

＆＃13;

＆＃13;

.mainDiv{
  position: relative;
  width: 206px;
  height: 190px;
  margin: 0px auto;
  margin-top:100px;
}
.tile {
  width:100px;
  height:100px;
  background:#c52329;
  border:solid 2px #FFF;
  position: absolute;
}
.square{
  transform: skewY(30deg);
  top: 43px;
}
.square2{
  transform: skewY(-30deg);
  left:102px;
  top: 43px;
}
.square3{
  height: 58px;
  left: 50px;
  top: -18px;
  transform: skew(60deg, -30deg);
}

＆＃13;

<div class="mainDiv">
  <div class="tile square"></div>
  <div class="tile square2"></div>
  <div class="tile square3"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

完成工作。我也为你整理了大量重复的风格。

Answer 5

更改.square3的CSS应该这样做：

height: 58px;
left: 50px;
position: absolute;
top: -18px;
transform: skew(240deg, 150deg);
width: 100px;

https://jsfiddle.net/8vuj7peb/26/

Answer 6

对.square3使用以下css：

.square3{
  width:110px;
  height:110px;
  background:#c52329;
  float:left;
  transform: rotate(45deg) skew(-15deg, -15deg);
  position: absolute;
  left: 46px;
  top: -42px;
}

Answer 7

一个盒子和两个伪也可以做到这一点。

http://codepen.io/gc-nomade/pen/vGeajp

＆＃13;

＆＃13;

#square {

  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: #C52329;
  /*box-shadow: 0 0 5px;*/
  width: 90px;
  height: 150px;
  margin: 5em;
  position: relative;
  transform: skew(30deg) rotate(30deg);
}

#square:before,
#square:after {
  display: inherit;
  align-items: center;
  justify-content: center;
  content: 'before';
  position: absolute;
  top: 0;
  left: 2px;
  right: -2px;
  bottom: 0;
  background: inherit;
  border-radius: inherit;
  box-shadow: inherit;
  transform: translate(100%, -31%) skew(0, -45deg) rotate(0deg);
}
#square:after {
  content: 'after';
  top: -2px;
  left: 0%;
  height: 60%;
  right: 0;
  bottom: 2px;
  transform: translate(50%, -100%) rotate(0deg)skew(-45deg)
}

＆＃13;

<div id="square">
  boxe
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 8

我看到了这一点，并认为我会在尝试制作一些老式的abc块时添加一些我想出的东西。将它们变成3d我只需要用另一个类标记主容器来改变位置并保存在代码上。我在代码中评论了教程。希望这有助于某人。 ：）

          
/*-------------------------------------------------------------   
First we need to create our container for later reference
    -I put this to show in the center of the screen if you wanted to 
    copy and paste the code into a document for play. 
    -The width is just to give the margin auto something to center on. 
    -You really on need the element itself to reference later, but this is prettier
-------------------------------------------------------------*/
.box{
    width: 100px;
    margin: 200px auto;
    text-align: center;
    line-height: 5;
}

/*---------------------------------------------------------------------------
The box-wrapper is our real hero container here. This is where we nail our box together. 
    -set this to relative position for child elements to reference to.
    -transform-style is set to preserve-3d because I wanted to keep the look as the text turns with the box. You can also set this to flat, but its not near as cool. 
---------------------------------------------------------------------------*/


.box-wrapper{
    position: relative;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;    
}
/*-------------------------------------------------------------------------
Here I am just giving the box its needed dimesions and setting them to absolute so nothing gets any ideas of wandering off.
    -PLEASE NOTE: the border has 2px and our w:98 h:98 making it a total of 100px. (this is important when we translate later)
-------------------------------------------------------------------------*/
.box-wrapper div{
    width: 98px;
    height: 98px;
    position: absolute;    
    border: 2px solid black;
    border-radius: 5px;
}

/*----------------------------------------------------------------------
Since our sides are 100px we only need to move our box sides 50px to get the edges to match up without gaps.
    -Meaning "translate" moves to the position relative to your .box-wrapper. (You can play with this code to see it in action, try to take a visible section of the box and take it down 10). 
    -Also I use "rotate" y and x to turn our box sheets (.box-wrapper div's)
-----------------------------------------------------------------------*/
.front{
    transform: translateZ(50px) rotateY(0deg);
}
.back{
    transform: translateZ(-50px) rotateY(180deg);
}
.top{
    transform: translateY(-50px) rotateX(90deg);
}
.bottom{
    transform: translateY(50px) rotateX(-90deg);
}

.right{
    transform: translateX(50px) rotateY(90deg);
}
.left{
    transform: translateX(-50px) rotateY(270deg);
}

/*-----------------------------------------------------------------------
Then after all of this we can use our cool box-wrapper to turn this baby
Hope this is helpful! :) Enjoy!
-------------------------------------------------------------------------*/

.box .box-wrapper{
    transform: rotateX(-30deg) rotateY(-40deg);
}
.box .box-wrapper div{
    background-color: yellow;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Bob the box builder</title>
        <link rel="stylesheet" type="text/css" href="boxstyle.css">
        <style>
            

        </style>
    </head>
    <body>
<!--Create our box that holds our stuff -->
           <div class="box">
<!--Create our real container that keeps our box sides nailed together-->
                    <div class="box-wrapper">
<!--Make our box sheets that we will nail together with css-->
                        <div class="front">Front</div>
                        <div class="back">Back</div>
                        <div class="left">Left</div>
                        <div class="right">Right</div>
                        <div class="top">Top</div>
                        <div class="bottom">Bottom</div>
                    </div>
                </div>
    </body>
</html>

Answer 9

      y         
      |          
      |____ x 
     ╱        
    z 

从正面想象一个立方体。你看到了什么？屏幕上方出现一个正方形。因此，对于正面方面，我们有：

.front {
  transform : translateZ(50px);
}

对于右侧一侧，我们有一个正方形，该正方形在Y轴上旋转了90度，并在自己的新Z轴上移动：

.right {
  transform : rotateY(90deg) translateZ(50px);
}

对于左侧一侧，我们有一个正方形，该正方形在Y轴上旋转了-90度，并在自己的新Z轴上移动：

.right {
  transform : rotateY(-90deg) translateZ(50px);
}

对于顶部一侧，我们有一个正方形，该正方形在X轴上旋转90度并在自己的新Z轴上移动：

.right {
  transform : rotateX(90deg) translateZ(50px);
}

对于后面，我们有一个正方形，该正方形在Y轴上旋转了-180度，并在自己的新Z轴上移动：

.right {
  transform : rotateY(-180deg) translateZ(50px);
}

然后，只需将它们包装到具有transform-style: preserve-3d属性的形状容器类中即可：

.cube {
  transform-style: preserve-3d;
}

最后，您可以旋转立方体并查看CSS-3D魔术。

.cube {
  transform-style: preserve-3d;
  transform: rotateX(-40deg) rotateY(45deg);
}

.cube {
  transform-style: preserve-3d;
  transform: rotateX(-40deg) rotateY(45deg);
}

.side {
  position: absolute;
  width: 100px;
  height: 100px;
  background: #c52329;
  border: solid 3px white;
}

.front {
  transform: translateZ(53px);
}

.top {
  transform: rotateX(90deg) translateZ(53px);
}

.right {
  transform: rotateY(90deg) translateZ(53px);
}

.left {
  transform: rotateY(-90deg) translateZ(53px);
}

.bottom {
  transform: rotateX(-90deg) translateZ(53px);
}

.back {
  transform: rotateY(-180deg) translateZ(53px);
}

<div class="cube">
  <div class="side front"></div>
  <div class="side back"></div>
  <div class="side right"></div>
  <div class="side left"></div>
  <div class="side top"></div>
  <div class="side bottom"></div>
</div>

这是一个完整的立方体。对于您的方法，可以忽略背面，右侧和底部。

感谢css-tricks.com