How to realize transition and transfor effect in css3
This article introduces the relevant knowledge of "how to achieve transition and transfor effects in css3". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!
The code is as follows:
Css3's transition effect body {background:#000;} * {margin:0; padding:0; list-style:none; outline:none;} div {width:960px; margin:50px auto;} li {width:130px; height:450px; background:#fff; float:left; text-align:center; line-height:450px; border:1px solid # 666; position:relative; border-radius:5px; box-shadow:0 0 5px # 666;-webkit-transition:all 0.5s ease-in-out -moz-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;} # card1 {- webkit-transform:rotate (- 20deg);-moz-transform:rotate (- 20deg);-ms-transform:rotate (- 20deg);-o-transform:rotate (- 20deg); left:130px; top:40px; z indexms-transform:rotate 1;} # card2 {- webkit-transform:rotate (- 10deg) -moz-transform:rotate (- 10deg);-ms-transform:rotate (- 10deg);-o-transform:rotate (- 10deg); left:40px; top:15px; z indexms-transform:rotate 2;} # card3 {z webkit-transform:rotate 10deg 6;} # card4 {- index (10deg);-moz-transform:rotate (10deg);-ms-transform:rotate (10deg);-o-transform:rotate (10deg); right:40px; top:15px; z-index:5 } # card5 {- webkit-transform:rotate (20deg);-moz-transform:rotate (20deg);-ms-transform:rotate (20deg);-o-transform:rotate (20deg); right:130px; top:40px; z indexVes4; # transform li:hover {z-index7;} # card1:hover {background:orange;-webkit-transform:scale (1.1) rotate (- 18deg);-moz-transform:scale (1.1) rotate (- 18deg) -ms-transform:scale (1.1) rotate (- 18deg);-o-transform:scale (1.1) rotate (- 18deg);} # card2:hover {border:5px solid red;-webkit-transform:scale (1.1) rotate (- 8deg);-moz-transform:scale (1.1) rotate (- 8deg);-ms-transform:scale (1.1) rotate (- 8deg);-o-transform:scale (1.1) rotate (- 8deg) Card3:hover {- webkit-transform:scale (1.1) rotate (2deg);-moz-transform:scale (1.1) rotate (2deg);-ms-transform:scale (1.1) rotate (2deg);-o-transform:scale (1.1) rotate (2deg);} # card4:hover {- webkit-transform:scale (1.1) rotate (8deg);-moz-transform:scale (1.1) rotate (8deg);-ms-transform:scale (1.1) rotate (8deg) -o-transform:scale (1.1) rotate (8deg);} # card5:hover {- webkit-transform:scale (1.1) rotate (18deg);-moz-transform:scale (1.1) rotate (18deg);-ms-transform:scale (1.1) rotate (18deg);-o-transform:scale (1.1) rotate (18deg);} 1 2 3 5
1.transform: deformation
Its properties are: rotate (10deg) degree of rotation; skew (10deg) tilt; scale (1.5) scaled proportionally, negative numbers reduced, translate (120pxPower0) shifted, 120px moved to the right, and negative numbers indicate left or up.
2.transition allows css attribute values to transition smoothly over a certain period of time.
Transition:all (attributes that perform transformations) 0.5s (duration of transformations) ease-in-out (rate of changes in transformations)
This is the end of "how to achieve transition and transfor effects in css3". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!
