search
HomeWeb Front-endCSS TutorialInterpretation of CSS 3D view properties: transform and perspective

CSS 3D 视图属性解读:transform 和 perspective

Interpretation of CSS 3D view properties: transform and perspective, specific code examples are required

Introduction:
In modern web design, 3D effects have become a very important Popular elements. Through the transform and perspective properties of CSS, we can easily add 3D visual effects to web pages to make them more vivid and attractive. This article will explain these two properties and provide specific code examples.

1. Transform attribute:
The transform attribute is a very powerful attribute in CSS. It can realize various transformation operations such as rotation, scaling, movement and tilt of elements. In the 3D view, we can use the transform attribute to transform elements in 3D space.

The following are some commonly used transform functions:

  1. Rotation:
    transform: rotateX(45deg); // Rotate 45 degrees around the X axis
    transform: rotateY( 45deg); // Rotate 45 degrees around the Y axis
    transform: rotateZ(45deg); // Rotate 45 degrees around the Z axis
  2. Scale:
    transform: scale(2); // In Magnify twice on the X and Y axes
    transform: scaleX(2); // Magnify twice on the X axis
    transform: scaleY(2); // Magnify twice on the Y axis
  3. Move:
    transform: translateX(100px); // Move 100 pixels on the X axis
    transform: translateY(100px); // Move 100 pixels on the Y axis
    transform: translateZ(100px ); // Move 100 pixels on the Z axis
  4. Tilt:
    transform: skewX(45deg); // Tilt 45 degrees along the X axis
    transform: skewY(45deg); // Along The Y-axis is tilted 45 degrees

By combining different transform functions, we can achieve complex 3D transformation effects. For example, we can use rotation, scaling, and movement to create a 3D cube:

<div class="cube">
  <div class="face front">Front</div>
  <div class="face back">Back</div>
  <div class="face left">Left</div>
  <div class="face right">Right</div>
  <div class="face top">Top</div>
  <div class="face bottom">Bottom</div>
</div>
.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
}

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

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

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

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

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

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

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

This code will create a 200x200 pixel cube with a translucent black background color on each side. The transformation of each face in 3D space can be achieved through the transform attribute. For example, by giving one of the faces translateZ(100px), you can move it forward 100 pixels relative to the viewpoint, thus forming the front face of the cube.

2. Perspective attribute:
The perspective attribute is used to set the perspective effect of the element. By setting the position and observation distance of the perspective point, it can affect the performance of the 3D transformation effect. Perspective also needs to be used with the transform attribute.

You can set the perspective attribute to make elements produce far and near effects in 3D space. For example:

.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform: rotateX(45deg) rotateY(45deg);
  transform-style: preserve-3d;
  perspective: 1000px;
}

In this example, by setting perspective: 1000px, we give the element a far and near effect of 1000 pixels. You can adjust the distance of an element in 3D space by changing the perspective value.

Summary:
By using the transform and perspective properties of CSS, we can easily add 3D effects to web pages. The transform attribute can implement transformation operations such as rotation, scaling, movement, and tilt of elements in 3D space. The perspective attribute can control the perspective effect of elements in 3D space. By combining the two, we are able to create a rich variety of 3D effects.

Reference:

  • CSS Transform (https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform)
  • CSS Perspective (https://developer.mozilla.org/zh-CN/docs/Web/CSS/perspective)

(Note: The above example code is only for demonstration effect, actual application needs to be based on specific needs Make adjustments)

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

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
A Little Reminder That Pseudo Elements are Children, Kinda.A Little Reminder That Pseudo Elements are Children, Kinda.Apr 19, 2025 am 11:39 AM

Here's a container with some child elements:

Menus with 'Dynamic Hit Areas'Menus with 'Dynamic Hit Areas'Apr 19, 2025 am 11:37 AM

Flyout menus! The second you need to implement a menu that uses a hover event to display more menu items, you're in tricky territory. For one, they should

Improving Video Accessibility with WebVTTImproving Video Accessibility with WebVTTApr 19, 2025 am 11:27 AM

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."- Tim Berners-Lee

Weekly Platform News: CSS ::marker pseudo-element, pre-rendering web components, adding Webmention to your siteWeekly Platform News: CSS ::marker pseudo-element, pre-rendering web components, adding Webmention to your siteApr 19, 2025 am 11:25 AM

In this week's roundup: datepickers are giving keyboard users headaches, a new web component compiler that helps fight FOUC, we finally get our hands on styling list item markers, and four steps to getting webmentions on your site.

Making width and flexible items play nice togetherMaking width and flexible items play nice togetherApr 19, 2025 am 11:23 AM

The short answer: flex-shrink and flex-basis are probably what you’re lookin’ for.

Position Sticky and Table HeadersPosition Sticky and Table HeadersApr 19, 2025 am 11:21 AM

You can't position: sticky; a

Weekly Platform News: HTML Inspection in Search Console, Global Scope of Scripts, Babel env Adds defaults QueryWeekly Platform News: HTML Inspection in Search Console, Global Scope of Scripts, Babel env Adds defaults QueryApr 19, 2025 am 11:18 AM

In this week's look around the world of web platform news, Google Search Console makes it easier to view crawled markup, we learn that custom properties

IndieWeb and WebmentionsIndieWeb and WebmentionsApr 19, 2025 am 11:16 AM

The IndieWeb is a thing! They've got a conference coming up and everything. The New Yorker is even writing about it:

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

SecLists

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)