Meta tags:
description=Use a propriedade CSS perspective-origin para definir a perspectiva em que o elemento é exibido ao utilizador. Veja valores e exemplos.;

Headings (most frequently used words):

propriedade, perspective, origin, exemplo, da, como, com, valor, right, css, funciona, sintaxe, valores, suporte, nos, navegadores, propriedades, relacionadas, praticar, resultado, left, definida, bottom,

Text of the page (most frequently used words):
perspective (48), border (42), #origin (40), css (33), style (28), text (22), position (20), font (20), html (19), left (19), width (18), color (18), grid (18), right (17), div (16), background (16), aprender (15), propriedade (15), transform (14), bottom (14), para (13), column (13), elemento (12), valor (12), title (12), ponto (11), top (11), padding (10), margin (10), break (10), como (9), fuga (9), que (9), uma (9), class (9), exemplo (9), image (9), animation (9), com (8), body (8), element2 (8), element1 (8), head (8), solid (8), 150 (8), height (8), stroke (8), define (7), overflow (7), decoration (7), offset (7), flex (7), valores (6), sintaxe (6), page (6), mesmo (6), align (6), type (6), variant (6), w3docs (5), todos (5), posição (5), preserve (5), rotatex (5), 100 (5), palavras (5), copiar (5), box2 (5), property (5), transition (5), line (5), last (5), outline (5), radius (5), child (5), formatter (5), generator (4), propriedades (4), items (4), perspetiva (4), não (4), são (4), padrão (4), vertical (4), chave (4), experimente (4), você (4), box1 (4), example (4), deg (4), 8ebf42 (4), 000 (4), absolute (4), 666 (4), relative (4), the (4), document (4), doctype (4), parece (4), mode (4), fill (4), size (4), list (4), template (4), row (4), gap (4), rule (4), nth (4), first (4), json (3), code (3), encoder (3), editor (3), quizzes (3), exercícios (3), php (3), javascript (3), exemplos (3), nos (3), navegadores (3), ser (3), origem (3), faz (3), visibility (3), efeito (3), percentagem (3), canto (3), initial (3), das (3), center (3), length (3), horizontal (3), side (3), object (3), css3 (3), qual (3), word (3), wrap (3), spacing (3), range (3), justify (3), before (3), after (3), max (3), letter (3), content (3), columns (3), auto (3), direction (3), clip (3), box (3), only (3), string (3), tools (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), beautifier (2), diff (2), password (2), ferramentas (2), prática (2), python (2), java (2), git (2), livros (2), snippets (2), praticar (2), relacionadas (2), suporte (2), funciona (2), this (2), place (2), controla (2), tamanho (2), seja (2), transformação (2), lado (2), rotacionado (2), exibido (2), backface (2), use (2), filhos (2), aplica (2), mais (2), relação (2), caixa (2), superior (2), esquerdo (2), câmara (2), esta (2), seu (2), pai (2), inherit (2), aceita (2), 130 (2), definida (2), está (2), animável (2), elementos (2), aplicado (2), mas (2), transformado (2), dois (2), por (2), quando (2), tem (2), ela (2), fica (2), face (2), filho (2), decide (2), unicode (2), timing (2), function (2), duration (2), delay (2), shadow (2), rendering (2), skip (2), inside (2), anchor (2), path (2), blend (2), min (2), rows (2), start (2), end (2), flow (2), feature (2), display (2), empty (2), counter (2), count (2), repeat (2), read (2), hash (2), 2026, direitos, reservados, feito, desenvolvedores, idioma, política, privacidade, contato, sobre, empresa, try, tutoriais, gratuitos, web, desde, 2014, next, previous, yes, was, helpful, verificar, fonte, deve, redimensionado, manipula, determina, espaço, longo, dos, eixos, cor, fundo, reverso, aninhados, mantenham, suas, posições, dentro, transformações, quais, aplicada, translatez, rotatey, distância, tenha, algum, obrigatória, suportado, modernos, necessidade, prefixos, fornecedor, versões, atuais, chrome, edge, firefox, safari, webkit, comprimento, resolvidos, própria, assim, coloca, inferior, direito, negativos, superiores, permitidos, mover, fora, herda, descrição, 160, centrado, pelo, uniformemente, escorçado, seguintes, movemos, esse, borda, observamos, mudança, ângulo, visão, aparente, resultado, código, farthest, closest, perspectiveorigin, 20px, dom, versão, sim, herdado, transformáveis, inicial, governa, seus, projetados, ele, próprio, informação, sempre, fornece, único, falta, pares, exceção, podem, escritas, qualquer, ordem, porque, cada, nomeia, eixo, específico, primeiro, segundo, também, num, sem, analisada, nada, ancestral, centro, exato, modo, rotacionada, simétrica, deslocar, caminhar, torno, objeto, visto, esquerda, direita, cima, baixo, profundidade, sua, onde, quanto, menor, dramático, escorçamento, quão, forte, cena, precisa, ingredientes, parecer, correta, partir, observador, estar, ver, outras, move, faces, inclinadas, ecrã, parecem, convergir, definir, perspectiva, utilizador, veja, zoom, index, writing, will, change, widows, white, space, user, select, bidi, underline, orientation, indent, ink, combine, upright, table, layout, tab, linecap, dashoffset, dasharray, speak, shape, outside, scrollbar, scroll, behavior, resize, quotes, pointer, events, orphans, order, opacity, rotate, distance, fit, mix, media, lines, clamp, keyframes, isolation, import, hyphens, hanging, punctuation, areas, area, weight, numeric, ligatures, east, asian, caps, alternates, stretch, language, override, adjust, kerning, values, settings, family, float, shrink, grow, basis, filter, cells, cursor, reset, increment, span, clear, charset, caret, caption, sizing, source, slice, outset, collapse, block, bleed, attachment, appearance, play, state, name, iteration, self, all, properties, visited, valid, target, selection, scope, root, required, write, placeholder, out, optional, not, link, lang, invalid, indeterminate, hover, fullscreen, focus, enabled, disabled, dir, default, checked, active, seletores, selectors, guia, flexbox, guides, gradientes, nomes, cores, tabelas, links, uso, introdução, basic, entrar, pesquisar, formatters, url, reverse, sha256, md5, calculator, colors, hsl, hex, mixer, converter, picker, general, cursos,

Text of the page (random words):
propriedade css perspective origin w3docs w3docs livros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python cursos quizzes exercícios snippets ferramentas general tools html editor password generator html encoder code diff json beautifier todos os 13 color tools color picker color converter color mixer color hex colors hsl todos os 10 string tools string length calculator md5 hash generator sha256 hash generator string reverse url encoder todos os 19 code formatters javascript formatter css formatter html formatter json formatter php formatter pesquisar na w3docs k pt english en deutsch de русский ru français fr español es português pt italiano it entrar aprender css css basic introdução ao css uso do css sintaxe css css id e class css text css font css links tabelas css css border css padding css margin nomes de cores css gradientes css css guides guia do flexbox propriedades css3 css selectors seletores css active after before checked default dir disabled empty enabled first child first letter first line first of type focus fullscreen hover in range indeterminate invalid lang last child last of type link not nth child nth last child nth last of type nth of type only child only of type optional out of range placeholder read only read write required root scope selection target valid visited css properties align content align items all animation align self animation delay animation direction animation duration animation fill mode animation iteration count animation name animation play state animation timing function appearance backface visibility background background attachment background blend mode background clip background color background image background origin background position background position x background position y background repeat background size bleed block overflow border border bottom border bottom color border bottom left radius border bottom right radius border bottom style border bottom width border collapse border color border image border image outset border image repeat border image slice border image source border image width border left border left color border left style border left width border radius border right border right color border right style border right width border spacing border style border top border top color border top left radius border top right radius border top style border top width border width bottom box decoration break box shadow box sizing break after break before break inside caption side caret color charset clear clip clip path color columns column count column fill column gap column rule column rule color column rule style column rule width column span column width content counter increment counter reset cursor direction display empty cells fill filter flex flex basis flex direction flex flow flex grow flex shrink flex wrap float font font face font display font family font feature settings font feature values font kerning font size font size adjust font language override font stretch font style font variant font variant alternates font variant caps font variant east asian font variant ligatures font variant numeric font weight grid grid area grid auto columns grid auto flow grid auto rows grid column grid column end grid column gap grid column start grid gap grid row grid row end grid row gap grid row start grid template grid template areas grid template columns grid template rows hanging punctuation height hyphens image rendering import initial letter isolation justify content justify items keyframes left letter spacing line break line clamp line height list style list style image list style position list style type margin margin bottom margin left margin right margin top max height max lines max width media min height min width mix blend mode object fit object position offset offset anchor offset distance offset path offset position offset rotate opacity order orphans outline outline color outline offset outline style outline width overflow overflow anchor overflow wrap overflow x overflow y padding padding bottom padding left padding right padding top page break page break after page break before page break inside perspective perspective origin place items pointer events position quotes resize right scroll behavior scrollbar shape outside speak stroke stroke dasharray stroke dashoffset stroke linecap stroke width tab size table layout text align text align last text combine upright text decoration text decoration color text decoration line text decoration skip text decoration skip ink text decoration style text fill color text indent text justify text orientation text overflow text rendering text shadow text stroke text stroke color text stroke width text transform text underline position top transform transform origin transform style transition transition delay transition duration transition property transition timing function unicode bidi unicode range user select vertical align visibility white space widows width will change word break word spacing word wrap writing mode z index zoom propriedade css perspective origin use a propriedade css perspective origin para definir a perspectiva em que o elemento é exibido ao utilizador veja valores e exemplos a propriedade css perspective origin define a posição a partir da qual o observador parece estar a ver um elemento transformado em 3d em outras palavras ela move o ponto de fuga o ponto para o qual as faces inclinadas em relação ao ecrã parecem convergir é uma das propriedades css3 como funciona uma cena 3d precisa de dois ingredientes para parecer correta a propriedade perspective que define quão forte é o efeito 3d quanto menor o valor mais dramático é o escorçamento a propriedade perspective origin que define onde fica a câmara perspective decide a profundidade do ponto de fuga perspective origin decide a sua posição horizontal e vertical por padrão o ponto de fuga fica no centro exato do elemento 50 50 de modo que uma face filho rotacionada parece simétrica deslocar perspective origin para um lado é como caminhar em torno do objeto o mesmo elemento filho parece ser visto da esquerda da direita de cima ou de baixo perspective origin só tem efeito quando perspective também está definida seja no mesmo elemento ou num ancestral sem ela a propriedade é analisada mas não faz nada a sintaxe de dois valores sempre lê horizontal primeiro vertical em segundo por exemplo perspective origin 25 75 quando se fornece um único valor o valor em falta tem como padrão center pares de palavras chave como top left são a exceção as palavras chave podem ser escritas em qualquer ordem porque cada uma nomeia um eixo específico i informação perspective origin é aplicado ao elemento pai mas governa como os seus elementos filhos são projetados o elemento ao qual é aplicado não é ele próprio transformado valor inicial 50 50 aplica se a elementos transformáveis herdado não animável sim a transformação da perspetiva é animável versão css3 sintaxe dom object style perspectiveorigin 20px 70 sintaxe sintaxe css de perspective origin perspective origin x position y position x y closest side farthest side initial inherit copiar exemplo da propriedade perspective origin exemplo de código css perspective origin doctype html html head title title of the document title style element1 position relative height 150 px width 150 px margin left 60 px border 1 px solid 666 perspective 130 px perspective origin 50 50 element2 padding 50 px position absolute border 1 px solid 000 background 8ebf42 transform style preserve 3d transform rotatex 45 deg style head body h2 perspective origin property example h2 h3 perspective origin 50 50 h3 div class element1 box1 div class element2 box2 div div body html copiar experimente você mesmo resultado com o valor padrão 50 50 o ponto de fuga está centrado pelo que o box2 rotacionado parece uniformemente escorçado nos exemplos seguintes movemos esse ponto para uma borda e observamos a mudança no ângulo de visão aparente exemplo da propriedade perspective origin com o valor left exemplo css perspective origin com valor left doctype html html head title title of the document title style element1 position relative height 150 px width 150 px margin left 20 px border 1 px solid 666 perspective 80 px perspective origin left element2 padding 50 px position absolute border 1 px solid 000 background 8ebf42 transform style preserve 3d transform rotatex 45 deg style head body h2 perspective origin property example h2 h3 perspective origin left h3 div class element1 box1 div class element2 box2 div div body html copiar experimente você mesmo exemplo da propriedade perspective origin com o valor right exemplo css perspective origin com valor right doctype html html head title title of the document title style element1 position relative height 150 px width 150 px margin left 160 px border 1 px solid 666 perspective 80 px perspective origin right element2 padding 50 px position absolute border 1 px solid 000 background 8ebf42 transform style preserve 3d transform rotatex 45 deg style head body h2 perspective origin property example h2 h3 perspective origin right h3 div class element1 box1 div class element2 box2 div div body html copiar experimente você mesmo exemplo da propriedade perspective origin definida como bottom right exemplo css perspective origin com valor bottom doctype html html head title title of the document title style element1 position relative height 150 px width 150 px margin left 60 px border 1 px solid 666 perspective 130 px perspective origin bottom right element2 padding 50 px position absolute border 1 px solid 000 background 8ebf42 transform style preserve 3d transform rotatex 45 deg style head body h2 perspective origin property example h2 h3 perspective origin bottom right h3 div class element1 box1 div class element2 box2 div div body html copiar experimente você mesmo valores valor descrição x position a posição horizontal do ponto de fuga aceita um length uma percentagem ou uma das palavras chave left 0 center 50 ou right 100 y position a posição vertical do ponto de fuga aceita um length uma percentagem ou uma das palavras chave top 0 center 50 ou bottom 100 initial define esta propriedade com o seu valor padrão 50 50 inherit herda esta propriedade do seu elemento pai os valores de percentagem e comprimento são resolvidos em relação à própria caixa do elemento com a origem no canto superior esquerdo assim 0 0 coloca o ponto de fuga no canto superior esquerdo 100 100 no canto inferior direito e valores negativos ou superiores a 100 são permitidos para mover a câmara para fora da caixa suporte nos navegadores perspective origin é suportado em todos os navegadores modernos não há mais necessidade de prefixos de fornecedor como webkit perspective origin para as versões atuais do chrome edge firefox e safari propriedades relacionadas perspective define a distância ao ponto de fuga e é obrigatória para que perspective origin tenha algum efeito transform aplica as transformações rotatex rotatey e translatez às quais a perspetiva é aplicada transform style use preserve 3d para que os filhos aninhados mantenham as suas posições 3d dentro da perspetiva backface visibility controla se o lado reverso de um elemento rotacionado é exibido praticar prática o que faz a propriedade css perspective origin o que faz a propriedade css perspective origin define a posição do ponto de fuga para a transformação 3d define a cor de fundo de um elemento determina a origem do espaço 3d ou seja a origem da perspetiva ao longo dos eixos x e y manipula o tamanho de um elemento controla como o tamanho da fonte deve ser redimensionado verificar was this page helpful yes no previous perspective next place items on this page como funciona sintaxe valores suporte nos navegadores propriedades relacionadas praticar w3docs tutoriais exemplos exercícios snippets e quizzes gratuitos para a web desde 2014 livros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python prática exercícios quizzes editor try it ferramentas html editor password generator html encoder code diff json beautifier empresa sobre contato política de privacidade idioma english deutsch русский français español português italiano 2026 w3docs todos os direitos reservados feito para desenvolvedores