CSS Perspective Generator
Generate CSS perspective and perspective-origin declarations for 3D transforms, with optional preserve-3d and a ready-to-paste snippet.
Input
Smaller values give a more dramatic 3D effect. 0 or empty outputs none.
Output
More ways to use this tool
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-perspective-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"distance": "600",
"originX": "50",
"originY": "50",
"preserve3d": "no"
}'Swap in your own key from your account. The tool's fields are the body — no wrapper.
Ask an AI agent
Use the IOTools `css-perspective-generator` tool (CSS Perspective Generator) on this input:
YOUR_INPUT_HEREPaste this at any agent connected to the IOTools MCP server, then add your input.
Embed widget
<iframe
src="https://iotools.cloud/embed/css-perspective-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS Perspective Generator — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Drop this into your own page — free, no key required, just a link back.
| Cost per API/MCP call | From 5 credits |
|---|---|
| Need more credits? | View pricing |
Also available with
Guides
What it does
The CSS Perspective Generator writes the perspective and perspective-origin declarations that give child elements a sense of 3D depth. Set the distance and the vanishing point with the controls and copy the generated CSS.
How perspective works
perspective sets the distance between the viewer and the z=0 plane. A small value such as 200px exaggerates depth; a large value such as 2000px looks almost flat. It is applied to the parent of the elements you transform with rotateX(), rotateY() or translateZ().
perspective-origin moves the vanishing point. The default is 50% 50%, the centre of the parent.
preserve-3d
Perspective only affects direct children. If you nest transformed elements (a cube made of faces, say), add transform-style: preserve-3d to the intermediate element so the 3D space carries through.
perspective property vs. perspective() function
The perspective property sets one shared vanishing point for all children. The perspective() function inside transform applies to that single element only. Use the property for scenes with several 3D children.