css旋转div使它具有3D感，div靠近屏幕端比较大，远离屏幕端变小

可以使用CSS3中的transform属性实现3D旋转效果，同时结合perspective属性增加透视效果。在进行旋转时，通过设置scale属性来实现离屏幕较远的div变小的效果。

例如，可以使用下面的CSS样式来实现旋转和透视效果：

.container {
  perspective: 1000px; /* 增加透视效果 */
}

.box {
  transform-style: preserve-3d; /* 保持3D效果 */
  transform: rotateY(30deg) scale(0.8); /* 旋转并缩小 */
  transition: all 0.5s ease-in-out; /* 添加过渡效果 */
}

.box:hover {
  transform: rotateY(0deg) scale(1); /* 鼠标悬停时还原 */
}

其中，`.container`为包含`div`的容器，`perspective`属性用于增加透视效果。`.box`为需要旋转的`div`，`transform-style`用于保持3D效果，`rotateY`用于旋转，`scale`用于缩小，`transition`用于添加过渡效果。在鼠标悬停时，通过设置`transform`为原始状态来还原`div`。

需要注意的是，旋转和缩放的角度需要根据具体情况进行调整，以达到最佳效果。

相关问题

css设置一个div恰好当前屏幕大小

要将一个div元素设置为恰好等于当前屏幕的大小，可以使用CSS中的绝对定位（absolute positioning）和视口单位（viewport units）结合起来。

首先，将该div元素的`position`属性设置为`absolute`，将其从文档流中移除，并将其位置相对于其最近的非`static`定位的祖先元素（如果没有，则相对于body元素）进行定位。

接下来，使用视口单位`vw`和`vh`将该div元素的宽度和高度设置为100，这样它就会填充整个屏幕。

最后，将该div元素的顶部(`top`)和左侧(`left`)位置设置为0，使其与屏幕顶部和左侧对齐。

以下是实现这个效果的CSS代码：

div {
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
}

这样，该div元素就会恰好等于当前屏幕的大小。

css 使得div旋转后有3D的效果

要使一个 div 元素旋转并产生 3D 效果，可以使用 CSS transform 属性。可以使用以下 CSS 代码：

div {
  transform: rotateY(45deg);
  transform-style: preserve-3d;
}

其中，rotateY() 函数用于使元素绕 Y 轴旋转，preserve-3d 属性指定元素的子元素也应该保持 3D 效果。通过改变 rotateY() 函数的参数值，可以控制元素的旋转角度。