如何创建只有HTML和CSS的立方体

CSS cube

我有这个,我想做一个立方体与 HTML & amp;CSS 只像在上面的图片。

.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;
}
<div class="mainDiv">
  <div class="square"></div>
  <div class="square2"></div>
  <div class="square3"></div>
</div>
24

根据您的 HTML,我得到this JSFiddle。我刚刚玩了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;
}
<div class="mainDiv">
  <div class="square"></div>
  <div class="square2"></div>
  <div class="square3"></div>
</div>

更新的 CSS

.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。

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

21

你也可以用 变换实现一个立方体。这将给你的立方体一个更逼真的视角。就好像立方体是一个真正的 形状是这样的:

 cube with  transforms

在我用一个 div 2 伪元素:

body {
  perspective: 900px;
  padding-bottom:50%;
}
div {
  position: relative;
  width: 20%;
  padding-bottom: 20%;
  margin: 0 auto;
  transform-style: preserve-;
  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);
}
<div></div>
CSS cube with 6 faces:

此技术允许您制作具有 6 个面的“真实立方体”:

rotating  cube with 6 faces

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-;
  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-: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-: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);
}
<h1>Hover me:</h1>
<div class="cube">
  <div class="cubeFace"></div>
  <div class="cubeFace face2"></div>
</div>

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

15

基本上,你想做 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>
9

首先让我指出skew角度应该在-90deg90deg之间,不包括在内。

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

.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);
}
<div class="mainDiv">
  <div class="tile square"></div>
  <div class="tile square2"></div>
  <div class="tile square3"></div>
</div>

工作完成。我还为您整理了大量重复的样式,使其成为一个常见的类。

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(872)
选择CSS网格/框架
上一篇
TimeSpan ToString格式
下一篇

相关推荐

  • css参考手册:标题

    CSS参考手册是一本关于CSS语言的参考书,由W3C组织出版,包含了CSS语言的完整语法、属性、值和案例等。它提供了一个完整的CSS语言参考,可以帮助开发者快速学习和使用CSS语言,从而更好地创建网页。…

    2023-06-29 01:40:51
    0 56 98
  • css登录界面模板代码:登录你的账号,开启新的旅程

    CSS登录界面模板代码是一种使用CSS来制作登录界面的代码,它可以帮助开发者快速制作出美观且易于使用的登录界面,以下是一个简单的CSS登录界面模板代码:…

    2023-05-06 06:17:54
    0 45 73
  • html引用css文件:My Webpage Welcome to My Webpage!

    示例示例在html文件中引用css文件,可以使用标签,代码示例如下:其中,rel属性表示关系,type属性表示文件的类型,href属性表示css文件的路径。…

    2023-06-21 12:33:03
    0 62 85
  • css鼠标移入移出:标题

    CSS鼠标移入移出,可以使用CSS中的:hover伪类来实现,代码如下:上面的代码表示,当鼠标移入.example元素时,将其文字颜色改为白色。…

    2023-04-28 12:13:20
    0 62 12
  • css自动换行:标题

    CSS自动换行可以使用CSS的word-wrap属性来实现,代码如下:该属性有两个可选值:…

    2023-11-21 11:03:53
    0 72 50
  • css布局技巧:和3个段落 标题 段落1 段落2 段落3

    CSS布局技巧是指使用CSS来实现页面布局的方法。这些技巧可以帮助开发人员快速实现页面布局,并且可以更好地控制页面的外观和行为。…

    2023-04-17 01:31:53
    0 22 91
  • css 超出自动换行:这是一个标题

    css 超出自动换行,可以使用 css 的 word-wrap 属性来实现,该属性允许长单词或 URL 地址换行到下一行。代码如下:…

    2023-04-08 01:41:59
    0 98 97
  • cssci核心期刊:探索CSSCI核心期刊的学术影响力

    CSSCI核心期刊是中国社会科学引文索引(CSSCI)的一个重要组成部分,它由中国社会科学院编辑出版研究所主办,收录全国各类学术期刊和社会科学领域的重要国内外学术期刊,是中国社会科学研究最具权威性和影响力的索引数据库。…

    2024-05-15 16:04:57
    0 22 90

发表评论

登录 后才能评论

评论列表(22条)