CSS 3D转换_css颜色转换

transform：用于定义对象的变换,包括旋转、平移、缩放、斜切等等.

perspective：定义了观察者与元素之间的距离,可以理解为观察者的眼睛离元素有多远.

perspective-origin：定义了元素在视图中的位置,可以设置两个值,分别是X轴和Y轴的位置.

rotateX：绕X轴旋转.

rotateY：绕Y轴旋转.

rotateZ：绕Z轴旋转.

scale：缩放.

translate：平移.

skew：斜切.

代码示例

HTML代码：

CSS代码：

.box {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  perspective: 500px;
}

.side {
  position: absolute;
  width: 200px;
  height: 200px;
  line-height: 200px;
  color: white;
  font-size: 24px;
  text-align: center;
  transition: all 0.5s ease;
  backface-visibility: hidden;
}

.front {
  background-color: red;
  transform: rotateY(0deg) translateZ(100px);
}

.back {
  background-color: blue;
  transform: rotateY(180deg) translateZ(100px);
}

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

.right {
  background-color: yellow;
  transform: rotateY(90deg) translateZ(100px);
}

.top {
  background-color: pink;
  transform: rotateX(90deg) translateZ(100px);
}

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

.box:hover .front {
  transform: rotateY(-90deg) translateZ(100px);
}

.box:hover .back {
  transform: rotateY(90deg) translateZ(100px);
}

.box:hover .left {
  transform: rotateY(0deg) translateZ(100px);
}

.box:hover .right {
  transform: rotateY(180deg) translateZ(100px);
}

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

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

以上就是土嘎嘎小编大虾米为大家整理的相关主题介绍,如果您觉得小编更新的文章只要能对粉丝们有用，就是我们最大的鼓励和动力,不要忘记讲本站分享给您身边的朋友哦！！