如何通过css设置标签label旋转90度

要实现标签 `<label>` 旋转 90 度，可以通过 CSS 的 `transform` 属性来实现。具体做法如下：

1. 首先，给 `<label>` 标签添加一个样式，比如 `rotate-label`，用来指定旋转属性。可以在 CSS 文件或者 `<style>` 标签中添加该样式，例如：

.rotate-label {
  transform: rotate(90deg);
}

2. 然后，在 HTML 文件中使用该样式，将 `<label>` 标签旋转 90 度。例如：

<label class="rotate-label">旋转后的标签</label>

这样，就可以将标签 `<label>` 旋转 90 度了。需要注意的是，旋转属性 `transform` 的兼容性较好，但若要支持 IE9 及以下版本，需要使用 `-ms-transform` 属性。

相关问题

threejs之显示Label-CSS2DRenderer

在 Three.js 中，要显示 2D 文本标签可以使用 CSS2DRenderer。

CSS2DRenderer 可以将 2D 元素渲染在 Three.js 的场景中，可以使用标准 HTML 和 CSS 样式来创建标签。这允许我们非常方便地创建自定义的标签，比如显示对象名称、文字、标注等等。

下面是一个简单的使用 CSS2DRenderer 显示文本标签的示例：

// 创建 CSS2DRenderer
var renderer = new THREE.CSS2DRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建场景和相机
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 创建文本标签
var label = document.createElement('div');
label.className = 'label';
label.textContent = 'Hello, World!';
var labelObj = new THREE.CSS2DObject(label);
labelObj.position.set(0, 0, 0);
scene.add(labelObj);

// 渲染循环
function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
render();

在上面的代码中，我们首先创建了一个 CSS2DRenderer，然后创建了场景和相机。接着，我们创建了一个 div 元素作为文本标签，设置了它的 className 和 textContent 属性，并将其包装为一个 CSS2DObject 对象，设置其位置并添加到场景中。最后，我们启动了渲染循环。

需要注意的是，CSS2DRenderer 渲染的元素是基于屏幕坐标系的，它们的位置是相对于窗口左上角的像素位置。如果需要将它们放置在 Three.js 中的某个物体上，需要通过计算其位置和旋转来实现。

three.js 模型加标签

在 three.js 中，可以通过创建 CSS2DObject 的方法来添加模型标签。具体步骤如下：

1. 创建标签的 DOM 元素。

   const labelDiv = document.createElement('div');
   labelDiv.className = 'label';
   labelDiv.textContent = 'Label Text';

2. 创建 CSS2DObject 对象并设置其位置。

   const labelObject = new THREE.CSS2DObject(labelDiv);
   labelObject.position.set(x, y, z);

3. 将 CSS2DObject 对象添加到场景中。

   scene.add(labelObject);

其中，CSS2DObject 对象继承自 three.js 的 Object3D 类，可以像其他 three.js 对象一样进行平移、旋转和缩放等操作。