Autoprefixer CSS online

Ściąga kodera

Transform, animations, grid, css, shortcode, Wordpress

Transform

Perspective

kodzik
obrazek

Za pomocą funkcji perspective() możemy określić (potrzebny dla przekształceń w przestrzeni 3D) rozmiar perspektywy interesującego nas elementu HTML.

transform: perspective(300px) rotateX(45deg);

Za pomocą właściwości perspective oraz dowolnej dodatniej liczby wraz z wybraną jednostką absolutną lub jednostką relatywną możemy określić rozmiar perspektywy, w której powinny znaleźć się elementy dzieci interesującego nas elementu HTML, lecz nie on sam.

perspective: 300px;

wartości właściwości CSS – wspólne dla przykładów

.hold {
    border: 1px dashed white;
    width: 262px;
    height: 132px;
}Code language: CSS (css)
.item {
    background: #289DCC;
    width: 260px;
    height: 130px;
}Code language: CSS (css)

1. funkcja perspective ()

<div class="hold">
    <div class="item item-1">hello!</div>
</div>Code language: HTML, XML (xml)
.item-1 {
    transform: perspective(300px) rotateX(50deg);
}Code language: CSS (css)
hello!

2. funkcja perspective ()

<div class="hold">
    <div class="item item-2">hello!</div>
</div>Code language: HTML, XML (xml)
.item-2 {
    transform: perspective(300px) rotateY(50deg);
}Code language: CSS (css)
hello!

3. funkcja perspective ()

<div class="hold">
    <div class="item item-3">hello!</div>
</div>Code language: HTML, XML (xml)
.item-3 {
    transform: perspective(300px) rotateX(50deg) rotateY(50deg);
}Code language: CSS (css)
hello!

4. właściwość perspective

<div class="hold rodzic-1">
    <div class="item dziecko-1">hello!</div>
</div>Code language: HTML, XML (xml)
.rodzic-1 {
    perspective: 300px;
}
.dziecko-1 {
    transform: rotateX(50deg);
}Code language: CSS (css)
hello!

5. właściwość perspective

<div class="hold rodzic-2">
    <div class="item dziecko-2">hello!</div>
</div>Code language: HTML, XML (xml)
.rodzic-2 {
    perspective: 300px;
}
.dziecko-2 {
    transform: rotateY(50deg);
}Code language: CSS (css)
hello!

linki