2d effect
1.css3 transition animations make softer,
transition: IE10 Firefox chrome Opera support, Chrome25 and earlier versions of Safari need to add -webkit-
transition:width 0.5s ease 1s(delay);transition:all 0.5s;(常用)
trasition-property: application of the provisions of the attribute name css
transition-property: width, height, background; can be a
transition-duration: default 0
transition-timing-function: transition effect curve, ease default
linear: uniform
ease: gradually slowed down; ease-in: slow start; ease-out: End slow; ease-in-out: Slow start and end
cubic-bazier(0,0,0,0):0-1；；https://cubic-bezier.com/#.17,.67,.83,.67
transition-delay: 2s, the default 0
css3 transition, so that the animation softer
.box{height: 100px;width: 100px;background: #888;transition: all 0.2s;transition-timing-function: cubic-bezier(.17,4,.86,.3)}
.box:hover{height: 120px;width: 120px;background: #222;}
<div class="box"></div>
2.2d deformation
transform (default central point scale movement of rotation)
rotate: rotate (30deg); required prior trasform-origin point define, positive clockwise,
skew:扭曲skew(x,y);skewX/Y(x/y);skew(30deg,30deg);
scale: scale (x, y); horizontal and vertical directions at the same scale, scaleX / Y (x / y); x / y is less than 1 refine
traslate: Mobile, tanslate (x, y) are simultaneously moved horizontally and vertically, translateX / Y (x / y);
matrix: Matrix deformation
trasform-origin: defined point, trasform-origin: x-axis y-axis;, x and y may be px% em, x may be left, center, right, y may be a top, center, bottom
css3 deformation
.box1{height: 100px;width: 100px;background: #0f0;transform-origin: left top;transition:all 0.5s;
transition-timing-function: cubic-bezier(.17,4,.86,.3)}
.box1:hover{transform: rotate(30deg)}
<div class="box1"></div>
3.3D effect
transform:
3D displacement
negative y direction, x negative values to the left, the farther the negative z; 2D displaced more translateZ () and translate3d () with respect to
3D rotation
Added rotateX () turn from the bottom up; rotateY () turn from left to right; rotateZ (); point of rotation
3D Scaling
scale3d (); scaleZ (); see changes,
transform-origin: deformation origin, transform-origin: x y z;
transform-style: nested elements are shown in 3D space, transform-style: flat (3d child element is not retained position) / preserve-3d (3d subelement reserved position),
perspective: perspectively, none no 3d, The smaller the value the closer, the more obvious, perspective: 800px-1200px (common); can be written on the parent when the child elements, but a plurality of sub deformable element, different effects
perspective-origin: We use this property to define the 3D elements of sight Vanishing Point
backface-visibility: is visible when not facing the screen
3d rotation
.box2{width: 1000px;perspective: 700px;height: 200px;border: 1px solid #777;margin: 0 auto;overflow: hidden;}
.box2 p{float: left;height: 80px;width: 200px;transform-style: preserve-3d;border: 1px solid #111;margin: 50px}
.box2 span{display: block;transition:all 0.5s;height: 80px;width: 200px;background:rgba(255, 0, 0, .5);}
p:nth-child(1) span:hover{transform:rotateX(30deg)}
p:nth-child(2) span:hover{transform:rotateY(30deg)}
p:nth-child(3) span:hover{transform:rotateZ(30deg)}
<div class="box2">
<p><span>x旋转</span></p><p><span>y旋转</span></p><p><span>z旋转</span></p>
</div>
3d box
.box3{position: relative;height: 500px;width: 500px;margin: 0 auto;perspective: 800px;perspective-origin: left top}
.box3 ul{height: 230px;width:230px;margin: auto;left:0;right:0;top: 0;bottom: 0;position: absolute;
transform-style: preserve-3d;transition: all 1s;}
.box3 ul:hover{transform:rotateX(360deg)}
.box3 ul li{height: 219px;position: absolute;width: 217px;backface-visibility: hidden}
.box3 ul li:nth-child(1){background: url("../img/sz.jpg") ;transform:translateY(-108px) rotateX(90deg)}
.box3 ul li:nth-child(2){background: url("../img/sz.jpg") -217px 0;transform:translateY(108px) rotateX(-90deg)}
.box3 ul li:nth-child(3){background: url("../img/sz.jpg") -434px 0;transform:translateX(-109px) rotateY(-90deg)}
.box3 ul li:nth-child(4){background: url("../img/sz.jpg") -651px 0;transform:translateX(109px) rotateY(90deg)}
.box3 ul li:nth-child(5){background: url("../img/sz.jpg") -868px 0;transform:translateZ(108px)}
.box3 ul li:nth-child(6){background: url("../img/sz.jpg") -1085px 0;transform:translateZ(-108px) rotateY(180deg)}
<div class="box3">
<ul><li>前</li><li>后</li><li>左</li><li>右</li><li>上</li><li>下</li></ul>
</div
css3 animation
1 transition: transition, transform, can only be defined first.
2 keyframe keyframes: @keyframes through, and by keywords from 0% to 100% equivalent, must be inclusive
@keyframes animationname{keyframes-selector{}}
When animated keyframes-selector, from-to, or 0% -100% (recommended)
animation: shorthand properties, in addition to animation-play-state
animation:aa 2s linear 2s infinte alternate;
animation-name: the name of the animation
animation-duration: time, default 0
animation-timing-function: 3d transition effect curve element, the reference transition
animation-delay: when to start, default 0
animation-iteration-count: number of plays, default 1, infinite infinite
animation-direction: normal / alternate (odd normal playback, even-direction playback)
animation-play-state: the play status, js used in combination, paused, running
step-start immediately jump to the next frame; is equivalent to steps (1, start) steps (10, start) step 10 is divided into an animation, an animation is executed as part of the left end is the start start.
step-end immediately jump to the next frame; is equivalent to steps (1, end) steps (10, end) movie divided into 10 steps, when the animation execution ending endpoint, the default value end..
css3 animation
.box4{height: 100px;width: 100px;margin: 200px 0;background: #333;position: fixed;animation: aa 2s alternate 3}
第一种方式：/* @keyframes aa{from{top: 0;left: 0;}to{top: 0;left: 200px;}} */
第二种方式：@keyframes aa {
0%{top: 0;left: 0;}25%{top: 0;left:250px;transform:scale(2);background: #f00}50%{top: 250px;left: 250px;transform:scale(3);background: #0f0}75%{top: 250px;left: 0;}100%{top: 0;left: 0;}
}
<div class="box4"></div>
.box4{
height:
100px;
width:
100px;
margin:
200px
0;
background:
#333;
position:
fixed;
animation: aa
2s
alternate
3}
/* @keyframes aa{from{top: 0;left: 0;}to{top: 0;left: 200px;}} */