Autoprefixer CSS online

Ściąga kodera

Transform, animations, grid, css, shortcode, Wordpress

Transform

Transform Origin

kodzik

Właściwość transform-origin służy do ustalenia punktu, wokół którego następuje transformacja.

HTML – wspólny dla przykładów

<div class="hold">
    <div class="item item-1-1">hello!</div>
</div>Code language: HTML, XML (xml)
<div class="hold">
    <div class="item item-2-1">hello!</div>
</div>Code language: HTML, XML (xml)

CSS – wspólny 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)

transform-origin

.item-1-1 {
    transform-origin: 0 0;
    transform: rotate(0deg);
}Code language: CSS (css)

hello!

bez transform-origin

.item-2-1 {
    transform: rotate(0deg);
}Code language: CSS (css)

hello!

transform-origin

.item-1-2 {
    transform-origin: 0 0;
    transform: rotate(10deg);
}Code language: CSS (css)

hello!

bez transform-origin

.item-2-2 {
    transform: rotate(10deg);
}Code language: CSS (css)

hello!

transform-origin

.item-1-3 {
    transform-origin: 0 0;
    transform: rotate(45deg);
}Code language: CSS (css)

hello!

bez transform-origin

.item-2-3 {
    transform: rotate(45deg);
}Code language: CSS (css)

hello!

transform-origin

.item-1-4 {
    transform-origin: 0 0;
    transform: rotate(90deg);
}Code language: CSS (css)

hello!

bez transform-origin

.item-2-4 {
    transform: rotate(90deg);
}Code language: CSS (css)

hello!

transform-origin

.item-1-5 {
    transform-origin: 0 0;
    transform: rotate(180deg);
}Code language: CSS (css)

hello!

bez transform-origin

.item-2-5 {
    transform: rotate(180deg);
}Code language: CSS (css)

hello!

transform-origin

.item-1-6 {
    transform-origin: 0 0;
    transform: rotate(360deg);
}Code language: CSS (css)

hello!

bez transform-origin

.item-2-6 {
    transform: rotate(360deg);
}Code language: CSS (css)

hello!

linki