Autoprefixer CSS online

Ściąga kodera

Transform, animations, grid, css, shortcode, Wordpress

TransformTransition

Transition & transform

kodzik

transition & transform

translateX
translateY
translateZ
translate
scaleX
scaleY
scale
matrix
skewX
skewY
skew
translate3d
rotateX
rotateY
rotate
matrix3d
html & css

html

<div class="item">
    <div class="blue translateX">
        translateX
    </div>
</div>
<div class="item">
    <div class="blue translateY">
        translateY
    </div>
</div>
<div class="item">
    <div class="blue translateZ">
        translateZ
    </div>
</div>
<div class="item">
    <div class="blue translate">
        translate
    </div>
</div>
<div class="item">
    <div class="blue scaleX">
        scaleX
    </div>
</div>
<div class="item">
    <div class="blue scaleY">
        scaleY
    </div>
</div>
<div class="item">
    <div class="blue scale">
        scale
    </div>
</div>
<div class="item">
    <div class="blue matrix">
        matrix
    </div>
</div>
<div class="item">
    <div class="blue skewX">
        skewX
    </div>
</div>
<div class="item">
    <div class="blue skewY">
        skewY
    </div>
</div>
<div class="item">
    <div class="blue skew">
        skew
    </div>
</div>
<div class="item">
    <div class="blue translate3d">
        translate3d
    </div>
</div>
<div class="item">
    <div class="blue rotateX">
        rotateX
    </div>
</div>
<div class="item">
    <div class="blue rotateY">
        rotateY
    </div>
</div>
<div class="item">
    <div class="blue rotate">
        rotate
    </div>
</div>
<div class="item">
    <div class="blue matrix3d">
        matrix3d
    </div>
</div>Code language: HTML, XML (xml)

css

.item {
    background: #ddd;
    width: 180px;
    line-height: 110px;
    color: #FFF;
    text-align: center;
    cursor: pointer;
}
.blue {
    background: #289DCC;
    opacity: 0.7;
}
.translateX {
    transform: translateX(1);
    transition: transform 0.5s ease;
}
.item:hover .translateX {
    transform: translateX(32px);
}
.translateY {
    transform: translateY(1);
    transition: transform 0.5s ease;
}
.item:hover .translateY {
    transform: translateY(32px);
}
.translateZ {
    transform: translateZ(1px);
    transition: transform 0.5s ease;
}
.item:hover .translateZ {
    transform: rotate3d(3, 2, 2, 90deg) translateZ(50px);
}
.translate {
    transform: translate(1, 1);
    transition: transform 0.5s ease;
}
.item:hover .translate {
    transform: translate(32px, 32px);
}
.scaleX {
    transform: scaleX(1);
    transition: transform 0.5s ease;
}
.item:hover .scaleX {
    transform: scaleX(2);
}
.scaleY {
    transform: scaleY(1);
    transition: transform 0.5s ease;
}
.item:hover .scaleY {
    transform: scaleY(2);
}
.scale {
    transform: scale(1, 1);
    transition: transform 0.5s ease;
}
.item:hover .scale {
    transform: scale(1.5, 1.5);
}
.matrix {
    transform: matrix(1, 1, 1, 1);
    transition: transform 0.5s ease;
}
.item:hover .matrix {
    transform: matrix(1, -1, 0, 1, 0, 0);
}
.skewX {
    transform: skewX(1);
    transition: transform 0.5s ease;
}
.item:hover .skewX {
    transform: skewX(30deg);
}
.skewY {
    transform: skewY(1);
    transition: transform 0.5s ease;
}
.item:hover .skewY {
    transform: skewY(30deg);
}
.skew {
    transform: skew(1, 1);
    transition: transform 0.5s ease;
}
.item:hover .skew {
    transform: skew(30deg, 20deg);
}
.translate3d {
    transform: translate3d(1px, 1px, 1);
    transition: transform 0.5s ease;
}
.item:hover .translate3d {
    transform: translate3d(1px, 1px, 50px) rotate3d(3, 2, 2, 90deg);
}
.rotateX {
    transform: perspective(1) scaleZ(1) rotateX(0deg);
    transition: transform 0.5s ease;
}
.item:hover .rotateX {
    transform: perspective(500px) scaleZ(2) rotateX(45deg);
}
.rotateY {
    transform: perspective(1) scaleZ(1) rotateY(0deg);
    transition: transform 0.5s ease;
}
.item:hover .rotateY {
    transform: perspective(500px) scaleZ(2) rotateY(45deg);
}
.rotate {
    transform: rotate(0);
    transition: transform 0.5s ease;
}
.item:hover .rotate {
    transform: rotate(270deg);
}
.matrix3d {
    transform: matrix3d(1);
    transition: transform 0.5s ease;
}
.item:hover .matrix3d {
    transform: matrix3d(0.8535533905932737, 0.4999999999999999, 0.14644660940672619, 0, -0.4999999999999999, 0.7071067811865476, 0.4999999999999999, 0, 0.14644660940672619, -0.4999999999999999, 0.8535533905932737, 0, 22.62994231491119, -20.3223304703363, 101.3700576850888, 1)
}Code language: CSS (css)

przykład 1

<div class="item-1">Hello!!</div>Code language: HTML, XML (xml)
css
.item-1 {
    width: 100px;
    height: 100px;
    background-color: #289DCC;
    transition: width 2s, height 2s, background-color 2s, transform 2s;
}

.item-1:hover {
    background-color: #f78de7;
    width: 200px;
    height: 200px;
    transform: rotate(180deg);
}Code language: CSS (css)
Hello!!

przykład 2

<div class="item-2">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit... </p>
</div>Code language: HTML, XML (xml)
css
.item-2 {
    background-color: #289DCC;
    transition: all 1.3s ease-in-out;
}

.item-2:hover {
    background-color: #000000;
    transform: rotate(360deg) scale(1.3);
}Code language: CSS (css)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis adipisci temporibus, dolorum quos. Culpa minus dignissimos, quas alias quos at facere eaque hic amet quae, atque. Numquam magni recusandae cupiditate nihil praesentium quia sit, laborum, cum perferendis perspiciatis doloribus atque veniam. Reprehenderit voluptate quia architecto corrupti nobis provident dolorem veritatis, ea maiores ducimus incidunt itaque harum id reiciendis ipsa nulla.

przykład 3

<div id="kropeczkiHold">
    <div id="kropeczki1"></div>
    <div id="kropeczki2"></div>
    <div id="kropeczki3"></div>
    <div id="kropeczki4"></div>
    <div id="kropeczki5"></div>
    <div id="kropeczki6"></div>
    <div id="kropeczki7"></div>
    <div id="kropeczki8"></div>
</div>Code language: HTML, XML (xml)
css
#kropeczkiHold {
    position: relative;
    width: 500px;
    height: 400px;
    margin: 0 auto 10px;
    padding: 10px;
}
#kropeczki1,
#kropeczki2,
#kropeczki3,
#kropeczki4,
#kropeczki5,
#kropeczki6,
#kropeczki7,
#kropeczki8 {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    position: absolute;
    top: 200px;
    left: 250px;
    background-color: blue;
    transition: all 2s ease-in-out;
    transform: translate3d(0, 0, 0);
}
#kropeczki1 {
    background-color: red;
    transition-delay: 0.1s;
}
#kropeczki2 {
    background-color: yellow;
    transition-delay: 0.2s;
}
#kropeczki3 {
    background-color: lime;
    transition-delay: 0.3s;
}
#kropeczki4 {
    background-color: orange;
    transition-delay: 0.4s;
}
#kropeczki5 {
    background-color: pink;
    transition-delay: 0.5s;
}
#kropeczki6 {
    background-color: blueviolet;
    transition-delay: 0.6s;
}
#kropeczki7 {
    background-color: magenta;
    transition-delay: 0.7s;
}
#kropeczki8 {
    background-color: #289DCC;
    transition-delay: 0.8s;
}
#kropeczkihold:hover #kropeczki1 {
    transform: translate(-250px, -200px);
}
#kropeczkihold:hover #kropeczki2 {
    transform: translate(0, -200px);
}
#kropeczkihold:hover #kropeczki3 {
    transform: translate(250px, -200px);
}
#kropeczkihold:hover #kropeczki4 {
    transform: translate(250px, 0);
}
#kropeczkihold:hover #kropeczki5 {
    transform: translate(250px, 200px);
}
#kropeczkihold:hover #kropeczki6 {
    transform: translate(0, 200px);
}
#kropeczkihold:hover #kropeczki7 {
    transform: translate(-250px, 200px);
}
#kropeczkihold:hover #kropeczki8 {
    transform: translate(-250px, 0);
}Code language: CSS (css)
#kropeczkiHold:hover #kropeczki1 {
    transform: translate(-250px, -200px);
}
#kropeczkiHold:hover #kropeczki2 {
    transform: translate(0, -200px);
}
#kropeczkiHold:hover #kropeczki3 {
    transform: translate(250px, -200px);
}
#kropeczkiHold:hover #kropeczki4 {
    transform: translate(250px, 0);
}
#kropeczkiHold:hover #kropeczki5 {
    transform: translate(250px, 200px);
}
#kropeczkiHold:hover #kropeczki6 {
    transform: translate(0, 200px);
}
#kropeczkiHold:hover #kropeczki7 {
    transform: translate(-250px, 200px);
}
#kropeczkiHold:hover #kropeczki8 {
    transform: translate(-250px, 0);
}Code language: CSS (css)

linki