transform property,now we can can be revisited with alternative ways to size, position, and change elements.two-dimensional and three-dimensional.transform property followed by the value. The value specifies the transform type followed by a specific amount inside parentheses.Example:
div {
transform: scale(1.5);
}
rotate value provides the ability to rotate an element from0 to 360 degrees.Example:
.box-1 {
transform: rotate(20deg);
}
.box-2 {
transform: rotate(-55deg);
}
scale value allows you to change the appeared size of an element.Example:
.box-1 {
transform: scale(.75);
}
.box-2 {
transform: scale(1.25);`
}
It can also write for each axis as :
.box-1 {transform: scaleX(.5);}//.box-2 {transform: scaleY(1.15);}//.box-3 {transform: scale(.5, 1.15);}
translate value works a bit like that of relative positioning, pushing and pulling an element in different directions without interrupting the normal flow of the document,by using the translateX value and the translateY value.Example:
box-1 {
transform: translateX(-10px);
}
.box-2 {
transform: translateY(25%);
}
.box-3 {
transform: translate(-10px, 25%);
}
skew, is used to distort elements on the horizontal axis, vertical axis, or both.Example:
.box-1 {
transform: skewX(5deg);
}
.box-2 {
transform: skewY(-20deg);
}
.box-3 {
transform: skew(5deg, -20deg);
}
Example:
.box-1 {
transform: rotate(25deg) scale(.75);
}
.box-2 {
transform: skew(10deg, 20deg) translateX(20px);
}
transform-origin property may be used to change this default origin positionfor the default transform origin that is the centeralized of an element, both 50% horizontally and 50% vertically.Example:
box-1 {
transform: rotate(15deg);
transform-origin: 0 0;
}
.box-2 {
transform: scale(.5);
transform-origin: 100% 100%;
}
.box-3 {
transform: skewX(20deg);
transform-origin: top left;
}
.box-4 {
transform: scale(.75) translate(-10px, -10px);
transform-origin: 20px 50px;
}
perspective it’s like a vanishing point, similar to that which can be seen in three-dimensional drawings.Example:
.box {
transform: perspective(200px) rotateX(45deg);
}
:hover, :focus, :active, and :target pseudo-classes.Example:
.box {
background: #2db34a;
transition-property: background;
transition-duration: 1s;
transition-timing-function: linear;
}
.box:hover {
background: #ff7b29;
}
transition-propertyit’s determines exactly what properties will be altered in conjunction with the other transitional properties.Example:
transition-property: background, border-radius;
the more popular transitional properties include the following:
<background-color,background-position,border-color,border-width,border-spacing,bottom,clip,color,crop,font-size,font-weight,height,left,letter-spacing,line-height,margin,max-height,max-width,min-height,min-width,opacity,outline-coloro,utline-offset,outline-width,padding,right,text-indent,text-shadow,top,vertical-align,visibility,width,word-spacing,z-index.>
transition-duration property.Example:
transition-duration: .2s, 1s;
transition-timing-function property is used to set the speed in which a transition will move.Example:
transition-timing-function: linear, ease-in;
A few of the more popular keyword values for the transition-timing-function property:
linear, ease-in, ease-out, and ease-in-out.
transition-delay property to determines how long a transition should be stalled before executing.Example:
.box {
background: #2db34a;
border-radius: 6px
transition-property: background, border-radius;
transition-duration: .2s, 1s;
transition-timing-function: linear, ease-in;
transition-delay: 0s, 1s;
}
.box:hover {
background: #ff7b29;
border-radius: 50%;
}
shorthand property by using transition, is capable of supporting allthe previous properties and values.Example:
.box {
background: #2db34a;
border-radius: 6px;
transition: background .2s linear, border-radius 1s ease-in 1s;
}
.box:hover {
color: #ff7b29;
border-radius: 50%;
}
Animations Keyframes@keyframes rule includes the animation name, any animation breakpoints, and the properties intended to be animated.Example:
@keyframes slide {
0% {
left: 0;
top: 0;
}
50% {
left: 244px;
top: 100px;
}
100% {
left: 488px;
top: 0;
}
}
animation-name property is used with the animation name, identified from the @keyframes rule, as the property value.it’s applied to the element in which the animation is to be applied to.
Example:
.stage:hover .ball {
animation-name: slide;
}
animation-duration property.Example:
.stage:hover .ball {
animation-name: slide;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: .5s;
}
animation-iteration-count property used to have an animation repeat itself numerous times.Using an
integerwill repeat the animation as many times as specified, while theinfinitekeyword will repeat the animation indefinitely in a never ending fashion.
Example:
.stage:hover .ball {
animation-name: slide;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: .5s;
animation-iteration-count: infinite;
}
animation-direction property used when you want to set the number of times to an animation repeats.Values for the
animation-direction propertyincludenormal, reverse, alternate, and alternate-reverse.
Example:
.stage:hover .ball {
animation-name: slide;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: .5s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
animation-play-state property allows an animation to be played or paused using the running and paused keyword values respectively.Example:
.stage:active .ball {
animation-play-state: paused;
}
animation-fill-mode property identifies how an element should be styled either before, after, or before and after an animation is run.The
animation-fill-mode propertyaccepts four keyword values, includingnone, forwards, backwards, and both.
Example:
.stage:hover .ball {
animation-name: slide;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: .5s;
animation-fill-mode: forwards;
}
animation property.Example:
.stage:hover .ball {
animation: slide 2s ease-in-out .5s infinite alternate;
}
References:
@Shay Howe /Transforms, Transitions, and Animations