Skip to content

[term entry]Transform3d() #8270

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
zombiekiller0906 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[term entry]Transform3d() #8270

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
107 changes: 107 additions & 0 deletions content/css/concepts/transform-functions/terms/translate3d/translate3d.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
---
Title: 'translate3d()'
Description: 'it allows HTML developers to rotate, translate, scale and skew along the X,Y,and Z axes'
Copy link
Collaborator

@mamtawardhani mamtawardhani Feb 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The description should start with a verb

Subjects:
- 'Web Development'
- 'Web Design'
- 'Computer Science'
Comment on lines +5 to +7
Copy link
Collaborator

@mamtawardhani mamtawardhani Feb 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The tags should be written in alphabetical order

Tags: #
- 'Browser compadibility'
Copy link
Collaborator

@mamtawardhani mamtawardhani Feb 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

typo: "Browser Compatibility"

- 'Design'
- 'Development'
CatalogContent:
- 'learn-css'
- 'paths/Front-End Engineer Career Path
---

Copy link
Collaborator

@mamtawardhani mamtawardhani Feb 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here an intro para is needed that defines the term and its uses

## Syntax

```pseudo
translate3d( tx, ty, tz )
```
The "translate3d()" function is a inbuilt function which is used to reposition an element in 3D space:

tx: This parameter holds the length of the translation corresponding to the x-axis. This parameter holds the value in form of number or percentage.

ty:This parameter holds the length of translation corresponding to the y-axis. This parameter holds the value in form of number or percentage.

tz:This parameter holds the length of translation corresponding to z-axis. This parameter holds the value in form of numbers only.
Comment on lines +24 to +28
Copy link
Collaborator

@mamtawardhani mamtawardhani Feb 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These should be represented in bullets as:

Parameters:

  • tx:
  • ty:
  • tz:


## Example
Copy link
Collaborator

@mamtawardhani mamtawardhani Feb 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
## Example
## Example 1


example 1:
Copy link
Collaborator

@mamtawardhani mamtawardhani Feb 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
example 1:

<!DOCTYPE html>
Copy link
Collaborator

@mamtawardhani mamtawardhani Feb 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before the code we need a description explaining what the code is actually doing. Also, wrap the code in html and css blocks

<html>

<head>
<title>
CSS translate3d() function
</title>
<style>
body {
text-align: center;
}

h1 {
color: green;
}

.translate3d_image {
transform: translate3d(100px, 0, 0);
}
</style>
</head>

<body>
<h1>GeeksforGeeks</h1>
<h2>CSS translate3d() function</h2>

<h4>Original Image</h4>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="GeeksforGeeks logo">
<br>

<h4>Translated image</h4>
<img class="translate3d_image"
src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="GeeksforGeeks logo">
</body>

</html>

example 2:
Copy link
Collaborator

@mamtawardhani mamtawardhani Feb 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
example 2:
## Example 2:

<!DOCTYPE html>
Copy link
Collaborator

@mamtawardhani mamtawardhani Feb 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before the code we need a description explaining what the code is actually doing. Also, wrap the code in html and css blocks

<html>
<head>
<title>CSS translate3d() function</title>
<style>
body {
text-align:center;
}
h1 {
color:green;
}
.GFG {
font-size:35px;
font-weight:bold;
color:green;
}
.geeks {
transform: translate3d(100px, 20px, 0);
}
</style>
</head>

<body>
<h1>GeeksforGeeks</h1>
<h2>CSS translate3d() function</h2>

<h4>Original Element</h4>
<div class="GFG">Welcome to GeeksforGeeks</div>

<h4>Translated Element</h4>
<div class="GFG geeks">Welcome to GeeksforGeeks</div>
</body>
</html>
Copy link
Collaborator

@mamtawardhani mamtawardhani Feb 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

At the end of both examples, the output images are to be linked. Place the images in the media folder in docs and link them here. (for both examples)