CSS实现旋转立方体 |

1月 20, 2022 | Nix.Huang

front

right

back

left

top

bottom

css:


.scene--hero {
  height: 200px;
  margin: 80px 0;
  /**指定用户在z轴观察点到z=0平面的距离*/
  perspective: 500px;
  /*指定varnishing point ，灭点，平行线在该点相交*/
  perspective-origin: 50% 50%;
  border: none;
}
.cube {
  width: 200px;
  height: 200px;
  position: relative;
  /*子元素位置在3D空间*/
  transform-style: preserve-3d;
}
.cube--hero {
  margin: 0 auto;
}
/*定义旋转动画*/
.cube.is-spinning {
  animation: spinCube 8s infinite linear;
}
/*旋转动画的起始和结束帧，同时按x轴和y轴旋转*/
@keyframes spinCube {
    0% { transform:  rotateX(  0deg) rotateY(  0deg); }
  100% { transform:  rotateX(360deg) rotateY(360deg); }
}
.cube__face {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid black;
  line-height: 200px;
  font-size: 40px;
  font-weight: bold;
  color: white;
  text-align: center;
}
.cube.is-backface-hidden .cube__face {
  backface-visibility: hidden;
}
.front  { background: hsla(  0, 100%, 50%, 0.7); }
.right  { background: hsla( 60, 100%, 50%, 0.7); }
.back   { background: hsla(120, 100%, 50%, 0.7); }
.left   { background: hsla(180, 100%, 50%, 0.7); }
.top    { background: hsla(240, 100%, 50%, 0.7); }
.bottom { background: hsla(300, 100%, 50%, 0.7); }

/*定义各个面如何生成旋转后平移，但是矩阵是先应用平移后旋转*/
.front  { transform: rotateY(  0deg) translateZ(100px); }
.right  { transform: rotateY( 90deg) translateZ(100px); }
.back   { transform: rotateY(180deg) translateZ(100px); }
.left   { transform: rotateY(-90deg) translateZ(100px); }
.top    { transform: rotateX( 90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }

.scene--hero {

height: 200px;

margin: 80px 0;

/**指定用户在z轴观察点到z=0平面的距离*/

perspective: 500px;

/*指定varnishing point ，灭点，平行线在该点相交*/

perspective-origin: 50% 50%;

border: none;

}

.cube {

width: 200px;

height: 200px;

position: relative;

/*子元素位置在3D空间*/

transform-style: preserve-3d;

}

.cube--hero {

margin: 0 auto;

}

/*定义旋转动画*/

.cube.is-spinning {

animation: spinCube 8s infinite linear;

}

/*旋转动画的起始和结束帧，同时按x轴和y轴旋转*/

@keyframes spinCube {

0% { transform: rotateX( 0deg) rotateY( 0deg); }

100% { transform: rotateX(360deg) rotateY(360deg); }

}

.cube__face {

position: absolute;

width: 200px;

height: 200px;

border: 2px solid black;

line-height: 200px;

font-size: 40px;

font-weight: bold;

color: white;

text-align: center;

}

.cube.is-backface-hidden .cube__face {

backface-visibility: hidden;

}

.front { background: hsla( 0, 100%, 50%, 0.7); }

.right { background: hsla( 60, 100%, 50%, 0.7); }

.back { background: hsla(120, 100%, 50%, 0.7); }

.left { background: hsla(180, 100%, 50%, 0.7); }

.top { background: hsla(240, 100%, 50%, 0.7); }

.bottom { background: hsla(300, 100%, 50%, 0.7); }

/*定义各个面如何生成旋转后平移，但是矩阵是先应用平移后旋转*/

.front { transform: rotateY( 0deg) translateZ(100px); }

.right { transform: rotateY( 90deg) translateZ(100px); }

.back { transform: rotateY(180deg) translateZ(100px); }

.left { transform: rotateY(-90deg) translateZ(100px); }

.top { transform: rotateX( 90deg) translateZ(100px); }

.bottom { transform: rotateX(-90deg) translateZ(100px); }

html:

<div class="scene--hero">
	<div class="cube cube--hero is-spinning">
	  <div class="cube__face front">front</div>
	  <div class="cube__face right">right</div>
	  <div class="cube__face back">back</div>
	  <div class="cube__face left">left</div>
	  <div class="cube__face top">top</div>
	  <div class="cube__face bottom">bottom</div>
	</div>
</div>

<div class="cube__face front">front</div>

<div class="cube__face right">right</div>

<div class="cube__face bottom">bottom</div>

</div>

Posted in: WEB开发

知行合一，止于至善

CSS实现旋转立方体

站内搜索