Transition & transform
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>
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)
}
przykład 1
<div class="item-1">Hello!!</div>
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);
}
Hello!!
przykład 2
<div class="item-2"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit... </p> </div>
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);
}
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>
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);
}
#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);
}