CSS3 3D Transformação

CSS3 3As funções de transformação D permitem3transformar elementos no espaço D.

do elemento3transformação D

Usando CSS3 3As funções de transformação D permitem operações básicas de transformação em elementos do espaço tridimensional, como mover, girar, escalar e inclinar.

Os elementos transformados não afetam os elementos ao redor, mas podem ser sobrepostos como elementos com alinhamento absoluto. No entanto, os elementos transformados continuam a ocupar espaço na disposição por padrão (sem transformação).

Usando transformações CSS e a função Transform()

CSS3 A propriedade transform usa funções de transformação para manipular o sistema de coordenadas dos elementos, para aplicar efeitos de transformação.

A parte seguinte descreve3Funções de transformação D:

translate3função d()

rotação3A função d() realiza3Os elementos no espaço D giram em torno do ponto de origem no vetor [x, y, z] em um ângulo especificado. Isso pode ser escrito como rotate(vx, vy, vz, angle).

exemplo

.container {
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　500px;
　　　　border:　4px sólido #e5a043;
　　　　background: #fff2dd;
}
.transformed {
　　　　-webkit-transform: translate3d(25px,　25px,　50px);　/*　Chrome, Safari, Opera　*/
　　　　transform: translate3d(25px,　25px,　50px);　
}

a função translate3d(25px, 25px, 5Mover a imagem ao longo do eixo X e Y no sentido positivo25pixels, e move-se ao longo do eixo Z na direção positiva50 pixels.

3D transição usa o sistema de coordenadas tridimensional, mas o movimento ao longo do eixo Z nem sempre é evidente, porque esses elementos existem em um plano bidimensional (plano) e não têm profundidade.

Usando perspectiva e perspective-a propriedade CSS origin adiciona profundidade à cena.

rotate3função d()

esta rotate3função d() rola o elemento D3D espaço dos elementos rola o elemento especificado em um ângulo. Pode ser escrito como rotate(vx, vy, vz, angle).

.container{
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　300px;
　　　　border:　4px solid #a2b058;
　　　　background: #f0f5d8;
}
.transformed {
　　　　-webkit-transform: rotate3d(0,　1, 0,　6, 0deg);　/*　Chrome, Safari, Opera　*/
　　　　transform: rotate3d(0,　1, 0,　6, 0deg);　
}

esta função rotate3d(0, 1, 0, 6, 0deg) roda a imagem ao longo do eixo Y60 graus. Você também pode usar valores negativos para rolar o elemento na direção oposta.

scale3função d()

scale3d() função altera o tamanho do elemento. Pode ser escrito como scale(sx, sy, sz). A menos que seja combinado com outras funções de transformação como rotação e perspetiva, o efeito desta função não é notável, conforme o exemplo a seguir.

.container{
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　300px;
　　　　border:　4px solid #6486ab;
　　　　background: #e9eef3;
}
.transformed {
　　　　-webkit-transform: scale3d(1,　1,　2) rotate3d(1, 0, 0,　6, 0deg);　/*　Chrome, Safari, Opera　*/
　　　　transform: scale3d(1,　1,　2) rotate3d(1, 0, 0,　6, 0deg);　
}

função scale3d(1, 1, 2) alonga o elemento ao longo do eixo Z, função scale3d(1, 0, 0, 6, 0, 0, 0deg) roda a imagem ao longo do eixo X60 graus.

matrix3função d()

matrix3função d() pode executar todas3D transição, por exemplo, translação, rotação e escalonamento. Ele adota4×4transiçãomatrizem forma16parâmetros.

Isto é usando matrix3função d() é executada3Exemplo de D transição.

.container{
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　300px;
　　　　border:　4px solid #d14e46;
　　　　background: #fddddb;
}
.transformed {
　　　　-webkit-transform: matrix3d(0.359127,　-0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0,　-0.913545, 0, 0.406737, 0, 0, 0, 0,　1);　/*　Chrome, Safari, Opera　*/
　　　　transform: matrix3d(0.359127,　-0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0,　-0.913545, 0, 0.406737, 0, 0, 0, 0,　1);　
}

Mas, quando várias transformações são executadas em uma vez, é mais conveniente usar uma função de transformação única e listá-las em ordem, conforme mostrado a seguir:

.container{
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　300px;
　　　　border:　4px solid #a2b058;
　　　　background: #f0f5d8;
}
.transformed {
　　　　-webkit-transform: translate3d(0,　0,)　60px) rotate3d(0,　1, 0,　-60deg) scale3d(1,　1,　2);　/*　Chrome, Safari, Opera　*/
　　　　transform: translate3d(0,　0,)　60px) rotate3d(0,　1, 0,　-60deg) scale3d(1,　1,　2);　
}

3Funções de Transformação D

A tabela a seguir resume brevemente todos3Função de Transformação D.