如何创建只有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

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

3d cube with 3d transforms

在下面我用一个 div 2 伪元素:

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);
}
<div></div>
CSS 3d cube with 6 faces:

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

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

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

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

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

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

相关推荐

  • Html转换:Figma转换为 HTMLCSS

    关于Html转换的问题,在figma to css html中经常遇到,什么是像素完美设计?它不响应吗?我在 youtube 上看到很多教程 (figma to html css),并且所有这些都使用在 figma 中为每个组件定义的相同 css。像 283px 和 90px 宽度为一个盒子。我的问题是,如果它以像素为单位是固定的,我如何使这个响应?如果我做 3 个布局的设计 (移动,选项卡,桌面 redes…

    2022-12-24 10:07:23
    0 12 14
  • CSS/HTML:使文本斜体的正确方法是什么

    什么是正确的方式使文本斜体?我已经看到以下四种方法:…

    2022-11-11 15:20:21
    0 25 18
  • css背景:Unlock the Power of CSS Backgrounds

    示例示例CSS背景是一种用于设置元素背景的CSS属性,它可以用来指定元素的背景颜色、图像或者渐变。代码示例:…

    2023-01-27 16:00:03
    0 97 89
  • css添加滚动条:标题

    CSS添加滚动条的方法如下:在CSS中添加属性:…

    2022-12-30 13:40:10
    0 58 35
  • cshtml和html的区别从语法和功能上来看。

    示例示例cshtml和html的区别:cshtml是一种混合式的文件,它将html、和C#代码结合在一起,而html只是一种纯静态的文件;…

    2023-02-03 13:04:18
    0 38 49
  • js控制css:Welcome to my page!

    示例示例JS控制CSS指的是使用来改变HTML元素的CSS属性,以达到动态改变页面样式的目的。下面是一个简单的代码示例:…

    2023-02-02 03:41:25
    0 56 45
  • css预处理器有哪些Sass、Less 和 Stylus

    CSS预处理器是一种用于构建CSS的工具,它可以帮助开发人员更轻松、更有效地创建和维护CSS代码。它们使用特殊的语法,可以添加变量、函数、继承和混合等功能,以帮助开发人员更轻松地编写CSS。…

    2023-01-18 11:57:40
    0 98 55
  • css属性选择器怎么用: bold;}`

    CSS属性选择器是一种CSS选择器,用于通过元素的属性和属性值来选择元素。它们可以与其他CSS选择器结合使用,以提供更多的灵活性和精确度。…

    2023-01-16 03:10:51
    0 25 94

发表评论

登录 后才能评论

评论列表(82条)