Webbing Wednesdays Week #11
With the help of CSS3 transform, one can move, scale, turn, spin, and stretch elements easily. We can also change shape, size and position of an element.
On the other hand, we can transform our elements using 2D or 3D transformation.
Numbers followed by -ms-, -webkit-, -moz-, or -o- specifies the first version that worked with prefix.
1. translate() : -ms-transform: translate(50px,100px);
With translate() method, the element moves from its current position, depending on the parameters given for the left (X-axis) and the top (Y-axis) position:
2. rotate() : -ms-transform: rotate(30deg);
With the rotate() method, elements rotate clockwise at a given degree. Negative values are allowed and rotate the element counter-clockwise.
3.scale() : -ms-transform: scale(2,4);
With the scale() method, element increases or decreases the size, depending on the parameters given for the width (X-axis) and the height (Y-axis):
4. skew() : -ms-transform: skew(30deg,20deg);
With skew() method, the element turns in a given angle, depending on the parameters given for the horizontal (X-axis) and the vertical (Y-axis) lines:
5. matrix() : -ms-transform: matrix(0.866,0.5,-0.5,0.866,0,0);
The matrix method takes six parameters, containing mathematic functions, which allows you to: rotate, scale, move (translate) and skew elements.
CSS3 Transform Properties are transform, transform-origin, transform-style, perspective, perspective-origin, backface-visibility
With the help of CSS3, we can add an effect while changing from one style to another.
For the Transitions, Flash or JavaScripts are not required.
Numbers followed by -webkit-, -moz-, or -o- specifies the first version that worked with a prefix.
Two things are necessary for the transitions:
div { -webkit-transition: border 2s; transition: width 2s; } div:hover { width: 500px; }
For transitions, duration is necessary to specify because the default value is 0. If there is no defined duration, transitions will not happen.
Transition effect will start when the specified CSS property changes its value. CSS property will change when a user mouse-over on an element:
div { -webkit-transition: width 2s, height 2s,-webkit-transform 2s; transition: width 2s, height 2s, transform 2s; }
div { -webkit-transition-property: width; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in; -webkit-transition-delay: 2s; transition-property: width; transition-duration: 1s; transition-timing-function: ease-in; transition-delay: 2s; }
CSS3 Transition Properties are transition, transition-delay, transition-duration, transition-property, transition-timing-function
With CSS3, we can create animations that can replace Flash animations, animated images and JavaScripts in existing web pages.
Numbers followed by -webkit-, -moz-, or -o- specifies first version that worked with a prefix.
For animation, duration is necessary to be specified because the default value is 0. If there is no defined duration, animation will not happen.
You can change as many properties you want, as many times you want.
You can specify when the change will happen in percent, or you can use the keywords ‘from’ and ‘to’ (which represents 0% and 100%).
0% represents the start of the animation, 100% is when the animation is complete.
div { width: 100px; height: 100px; background: red; position: relative; -webkit-animation: myfirst 5s linear 2s infinite alternate; animation: myfirst 5s linear 2s infinite alternate; } @-webkit-keyframes myfirst { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } @keyframes myfirst { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} }
CSS3 Animation Properties are @keyframes, animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timing-function.
Abhishek, Heading design department is one of the most innovative UI/UX experts for web with over 9 years of experience. He remains updated with the changing web trends and share his knowledge for performance improvements.
Contents How does IoT Technology help in Different Sectors in Healthcare? Understanding the User Perspectives Bring in technology to comprehend your customers Four Key inquiries […]
With this eBook, avoid making mistakes & create stunning user experiences for your web and mobile apps just like LinkedIn, Starbucks, and Bank of America.
No thanks, UX is not my priority