CSS 3D transformation properties: transform and perspective

CSS 3D transformation properties: transform and perspective, specific code examples are required

CSS 3D transformation properties are a powerful technology that can be implemented with some simple code Stunning visual effects. Among them, the two most commonly used properties are transform and perspective.

1. Transform attribute

The transform attribute is used to perform operations such as rotating, scaling, tilting, and moving elements. It can achieve different effects by setting different parameters.

1. Rotation

You can rotate the element by setting the rotate parameter. For example:

div {
  transform: rotate(45deg);
}

2. Scale

You can achieve scaling of elements by setting the scale parameter. For example:

div {
  transform: scale(1.5);
}

3. skew

You can tilt the element by setting the skew parameter. For example:

div {
  transform: skew(30deg);
}

4. Move

You can move elements by setting the translate parameter. For example:

div {
  transform: translate(100px, 50px);
}

2. Perspective attribute

The perspective attribute is used to define the observation point in the three-dimensional scene and affects the perspective effect of the element. It can change the perspective of elements by setting different parameters.

div {
  perspective: 800px;
}

After setting the perspective attribute, we need to use the transform-style attribute to apply the perspective effect to the child elements of the element.

div {
  perspective: 800px;
  transform-style: preserve-3d;
}

3. Application to Examples

The following is an example to demonstrate how to use the transform and perspective properties to achieve a cube effect.

HTML code is as follows:

<div class="cube">
  <div class="face front">前</div>
  <div class="face back">后</div>
  <div class="face left">左</div>
  <div class="face right">右</div>
  <div class="face top">上</div>
  <div class="face bottom">下</div>
</div>

CSS code is as follows:

.cube {
  width: 200px;
  height: 200px;
  position: relative;
  margin: 100px auto;
  perspective: 800px;
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg);
  animation: spin 6s linear infinite;
}

.face {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

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

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

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

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

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

@keyframes spin {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

The above code implements a simple cube and achieves rotation and perspective effects through transform and perspective properties. You can run the code yourself to see the effect.

To sum up, the CSS 3D transformation properties transform and perspective are important tools for creating exquisite visual effects. Through simple code, we can achieve various cool animation effects and enhance the visual appeal of web pages.

The above is the detailed content of CSS 3D transformation properties: transform and perspective. For more information, please follow other related articles on the PHP Chinese website!