我如何用 html 和 css 创建弯曲的 3d 对象 [英] How i can create curved 3d objects with html and css

问题描述

我有一个 html/css 3d 对象，如图 2 所示.我想让它像图 1 那样弯曲一点

是否有人知道如何实现它，或者是否有任何其他技术可以让我塑造这些 3d 对象?

这是图2中我的对象的代码:

.container {位置:绝对；左:50%；顶部:50%；变换:翻译(-50%，-50%)；}.cube {背景:#dc2e2e；宽度:200px；高度:50px；位置:相对；边距:50px；变换:旋转(32度)；}.cube::before {内容: '';显示:内联块；背景:#f15757；宽度:200px；高度:2px；变换:skewX(-80度)；位置:绝对；顶部:-2px；左:6px；}.cube::after {内容: '';显示:内联块；背景:#9e1515；宽度:12px；高度:50px；变换:skewY(-10deg);位置:绝对；顶部:-1px；左:100%；}

<div class="cube"></div>

解决方案

从 div 元素创建圆弧并不是那么简单.同样，使用 div 标签创建形状和图形也不是一个好方法，您应该使用可缩放矢量图形 (SVG)、HTML Canvas、WebGL 或任何其他 JS 库.

使用 div 标签，您可以通过添加底部边框半径来创建底部圆弧:

.cube {背景:#dc2e2e；宽度:200px；高度:50px；位置:相对；边距:50px；框阴影:0px 10px 16px -6px 黑色；边框左下角半径:50%；边框右下角半径:50%；}

<div class="cube"></div>

但是您不能使用边框顶部半径来实现顶部圆弧，因为使用它会创建一个相反方向的圆弧，从而创建一个椭圆形而不是拱形.

您可以做的一件事是用另一个白色的 div 标签覆盖矩形的上部，以创建类似拱形的效果.

.arch {宽度:200px；溢出:隐藏；}.lowerarc {宽度:240px；位置:相对；右:-10px；左:-20px；高度:80px；背景颜色:黑色；边框左下角半径:50%；边框右下角半径:50%；}.upperarc {高度:80px；位置:相对；宽度:240px；顶部:-120px；右:-10px；左:-20px；背景颜色:白色；边框左下角半径:50%；边框右下角半径:50%；}

<div class="lowerarc"></div><div class="upperarc"></div>

但是看起来不太好.所以使用 div 可能不是获得所需结果的最佳方式.

尝试使用 SVG:在下面的这个例子中，我们通过绘制像素值并用特定颜色填充形状，使用线条和曲线创建了一个拱形.

M表示移动，L表示直线，Q表示曲线，z表示闭合路径，对应的数字为像素值

在下面的这段代码中，我们只是创建了一条曲线，但厚度为 50 像素.

使用画布:Canvas 类似于 Svg，但它使用 javascript 创建路径和图形.

var canvas = document.getElementById('canvas');var c = canvas.getContext('2d');c.beginPath();c.moveTo(60, 0);c.lineTo(10, 0);c.quadraticCurveTo(0, 170, 170, 250);c.lineTo(195, 210);c.quadraticCurveTo(50, 150, 60, 0);c.fill();

</canvas>

虽然 SVG 和 Canvas 仅用于创建 2D 图形，但您仍然可以将 2D 对象一起使用来创建类似 3D 的错觉.

var canvas = document.getElementById('canvas');var c = canvas.getContext('2d');c.fillStyle="rgba(0, 0, 25, 0.7)";c.beginPath();c.moveTo(10, 0);c.lineTo(0, 5);c.quadraticCurveTo(-10, 180, 170, 260);c.lineTo(195, 220);c.lineTo(195, 210);c.quadraticCurveTo(30, 250, 60, 0);c.fill();c.fillStyle="rgb(200, 210, 200)";c.beginPath();c.moveTo(60, 0);c.lineTo(10, 0);c.quadraticCurveTo(0, 165, 170, 250);c.lineTo(195, 210);c.quadraticCurveTo(50, 135, 60, 0);c.fill();

</canvas><script src="main.js"></script>

SVG 和 Canvas 代码看起来很吓人，但并不像看起来那么难.您可以阅读文档或观看 Youtube 教程以正确学习.

I have an html/css 3d object as in picture 2. I want to make it curve a little bit as in picture 1

Does someone have an idea perhaps how it could be achieved Or if there is any other technology by which I can shape these 3d objects ?

This is the code for my object in the picture 2:

.container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.cube {
  background: #dc2e2e;
  width: 200px;
  height: 50px;
  position: relative;
  margin: 50px;
  transform: rotate(32deg);
}

.cube::before {
  content: '';
  display: inline-block;
  background: #f15757;
  width: 200px;
  height: 2px;
  transform: skewX( -80deg);
  position: absolute;
  top: -2px;
  left: 6px;
}

.cube::after {
  content: '';
  display: inline-block;
  background: #9e1515;
  width: 12px;
  height: 50px;
  transform: skewY(-10deg);
  position: absolute;
  top: -1px;
  left: 100%;
}

<div class="container">
  <div class="cube"></div>
</div>

解决方案

Creating an arc out of a div element is not so straightforward . Also using div tag to create shapes and graphics is not a good way instead you should use Scalable Vector Graphics(SVG), HTML Canvas, WebGL or any other JS libraries.

Using div tag you can create a bottom arc by adding bottom border radius:

.cube {
  background: #dc2e2e;
  width: 200px;
  height: 50px;
  position: relative;
  margin: 50px;
  box-shadow: 0px 10px 16px -6px black;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

<div class="container">
<div class="cube"></div>
</div>

But you can't achieve a top arc using the border top radius because using it will create an arc in opposite direction and thus create an oval instead of an arch.

One thing you can do is to overlay the upper part of the rectangle with another div tag of white color to create an arch like effect.

.arch {
  width: 200px;
  overflow: hidden;
}
.lowerarc {
  width: 240px;
  position: relative;
  right: -10px;  
  left: -20px;
  height: 80px;
  background-color: black; 
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}
.upperarc {
  height: 80px;
  position: relative;
  width: 240px;
  top: -120px;
  right: -10px;
  left: -20px;
  background-color: white; 
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%; 
}

<div class="arch">
  <div class="lowerarc"></div>
  <div class="upperarc"></div>
</div>

But it doesn't look good. so using div is probably not the best way to get the desired result.

Try using SVG instead: In this example below we create an arch using lines and curves by plotting pixel values and filling the shape with a specific color.

M means move to, L to create a line, Q to draw curves, and z to close the path and the number corresponding to it are the values in pixel

<svg width="200">
<path d="M0,0 L0,50 Q100,80 200,50 L200,0 Q100,25 0, 0z" fill="black" />
</svg>

In this code below, we just create a curve line but with a 50px thickness.

<svg viewBox="0 0 1000 400">
  <path d="M 60,250 C 60,150 150,50 250,50" fill="none" 
stroke="green" stroke-width="50"></path>
</svg>

Use Canvas: Canvas is similar to Svg but it uses javascript to create path and graphics.

var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');

c.beginPath();
c.moveTo(60, 0);
c.lineTo(10, 0);
c.quadraticCurveTo(0, 170, 170, 250);
c.lineTo(195, 210);
c.quadraticCurveTo(50, 150, 60, 0);
c.fill();

<canvas id="canvas" width="622" height="1080"></canvas>

While SVG and Canvas are used to create 2D graphics only,but still you can use 2D objects together to create a 3D like illusion.

var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');

c.fillStyle="rgba(0, 0, 25, 0.7)";
c.beginPath();
c.moveTo(10, 0);
c.lineTo(0, 5);
c.quadraticCurveTo(-10, 180, 170, 260);
c.lineTo(195, 220);
c.lineTo(195, 210);
c.quadraticCurveTo(30, 250, 60, 0);
c.fill();

c.fillStyle="rgb(200, 210, 200)";
c.beginPath();
c.moveTo(60, 0);
c.lineTo(10, 0);
c.quadraticCurveTo(0, 165, 170, 250);
c.lineTo(195, 210);
c.quadraticCurveTo(50, 135, 60, 0);
c.fill();

<canvas id="canvas" width="622" height="1080"></canvas>
<script src="main.js">
</script>

SVG and Canvas codes looks scary but it is not as difficult as it looks like. You can read documentations or watch Youtube tutorials to learn it properly.

这篇关于我如何用 html 和 css 创建弯曲的 3d 对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！