CSS3 3D transform创建立方体

最新推荐文章于 2021-06-19 05:15:20 发布

baoeni

最新推荐文章于 2021-06-19 05:15:20 发布

阅读量1k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Javascript 文章标签： css transition class div border html

本文链接：https://blog.csdn.net/baoeni/article/details/7691506

Javascript 专栏收录该内容

57 篇文章

订阅专栏

本文介绍如何使用HTML和CSS创建一个交互式的3D立方体。通过定义不同的transform属性，可以使立方体的每个面正确显示，并实现翻转效果。文章详细解释了如何设置各个面的位置以及如何为立方体添加过渡动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先建立html结构

<section class="container">
  <div id="cube">
    <figure class="front">1</figure>
    <figure class="back">2</figure>
    <figure class="right">3</figure>
    <figure class="left">4</figure>
    <figure class="top">5</figure>
    <figure class="bottom">6</figure>
  </div>
</section>

然后定义css，关键是透视和style

.container {
  width: 200px;
  height: 200px;
  position: relative;
  perspective: 1000px;
}

#cube {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
}

#cube figure {
  width: 196px;
  height: 196px;
  display: block;
  position: absolute;
  border: 2px solid black;
}

定义立方体的6个面，一个element是有正反面的，这里都是以div中心先旋转一个角度，比如说back是先旋转180度，这时这个div的z轴射向页面里（默认的是从页面射向外面），然后向页面里100px

#cube .front  { transform: rotateY(   0deg ) translateZ( 100px ); }
#cube .back   { transform: rotateX( 180deg ) translateZ( 100px ); }
#cube .right  { transform: rotateY(  90deg ) translateZ( 100px ); }
#cube .left   { transform: rotateY( -90deg ) translateZ( 100px ); }
#cube .top    { transform: rotateX(  90deg ) translateZ( 100px ); }
#cube .bottom { transform: rotateX( -90deg ) translateZ( 100px ); }

cube建立好了之后可以开始定义对cube的transform

#cube.show-front  { transform: translateZ( -100px ) rotateY(    0deg ); }
#cube.show-back   { transform: translateZ( -100px ) rotateX( -180deg ); }
#cube.show-right  { transform: translateZ( -100px ) rotateY(  -90deg ); }
#cube.show-left   { transform: translateZ( -100px ) rotateY(   90deg ); }
#cube.show-top    { transform: translateZ( -100px ) rotateX(  -90deg ); }
#cube.show-bottom { transform: translateZ( -100px ) rotateX(   90deg ); }

最后加上transition