简单使用 CSS 画一个正方体

最新推荐文章于 2024-04-08 20:56:39 发布

齐藤桑

最新推荐文章于 2024-04-08 20:56:39 发布

阅读量426

点赞数

文章标签： css css3 前端 html

本文链接：https://blog.csdn.net/m0_49216561/article/details/128410313

版权

这篇博客介绍了如何利用CSS3的3D变换特性，通过位移属性translateZ和旋转属性rotateX、rotateY来绘制一个正方体。通过设置transform-style: preserve-3d确保子元素呈现立体效果。

摘要由CSDN通过智能技术生成

使用CSS3的3D变换

位移属性 translateZ( ) 和旋转属性 rotateX( ) / rotateY( )；

使子元素立体呈现：transform-style: preserve-3d; 方便预览效果。

<!DOCTYPE html>
<html>
  <head>
  <title>test</title>
  <style> 
    .wrapper{ 
      width: 50%; 
      float: left; 
    } 
    .cube{ 
      font-size: 4em; 
      width: 2em; 
      margin: 1.5em auto; 
      transform-style: preserve-3d; 
      transform: rotateX(-35deg) rotateY(30deg); 
    } 
    .side{ 
      position: absolute; 
      width: 2em; 
      height: 2em; 
      background: rgba(255,99,71,0.6); 
      border: 1px solid rgba(0,0,0,0.5); 
      color: white; 
      text-align: center; 
      line-height: 2em; 
    } 
    .front{ 
      transform: translateZ(1em); 
    } 
    .bottom{ 
      transform: rotateX(-90deg) translateZ(1em); 
    } 
    .top{ 
      transform: rotateX(90deg) translateZ(1em); 
    } 
    .left{ 
      transform: rotateY(-90deg) tra

最低0.47元/天解锁文章

齐藤桑

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
简单使用 CSS 画一个正方体

位移属性 translateZ( ) 和旋转属性 rotateX( ) / rotateY( )；使子元素立体呈现：transform-style: preserve-3d;使用CSS3的3D变换。
复制链接

扫一扫