css3的2D和3D效果

2d效果

1.css3过渡，让动画更柔和，

transition:IE10 Firefox chrome Opera支持，Chrome25以及更早版本Safari需要添加-webkit-

transition:width 0.5s ease 1s(delay);transition:all 0.5s;(常用)

trasition-property:规定css应用的属性名称

transition-property:width,height,background;可以一个

transition-duration:默认0

transition-timing-function:过渡效果的曲线，默认ease

linear:匀速

ease:逐渐减慢；ease-in:慢速开始；ease-out:慢速结束；ease-in-out:慢速开始和结束

cubic-bazier(0,0,0,0):0-1；；https://cubic-bezier.com/#.17,.67,.83,.67

transition-delay:2s开始，默认0

css3过渡，让动画更柔和

.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变形

transform（默认中心点，缩放移动旋转）

rotate:rotate(30deg);需要现有trasform-origin定义基点，正数顺时针，

skew:扭曲skew(x,y);skewX/Y(x/y);skew(30deg,30deg);

scale：scale(x,y)；水平垂直方向同时缩放，scaleX/Y(x/y);x/y小于1缩小

traslate：移动,tanslate(x,y)水平和垂直方向同时移动，translateX/Y(x/y);

matrix：矩阵变形

trasform-origin:定义基点,trasform-origin:x-axis y-axis;,x和y可以是px % em,x可以是left,center,right,y可以是top,center,bottom

css3变形

.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效果

transform:

3D位移

相对于2d位移多了translateZ()和translate3d();y负值向上，x负值向左，z负值越远

3D旋转

新增了rotateX()从下向上转;rotateY()从左向右转;rotateZ();基点旋转

3D缩放

scale3d();scaleZ();看不出变化，

transform-origin:变形原点，transform-origin:x y z;

transform-style:被嵌套的元素在3D空间中显示，transform-style:flat(子元素不保留3d位置)/preserve-3d(子元素保留3d位置),

perspective:透视性,none没有3d,取值越小越靠近，越明显，perspective:800px-1200px(常用)；可以写在父、子元素上，但同时有多个子元素变形时，效果不同

perspective-origin:我们用该属性来定义3D元素视线灭点

backface-visibility:在不面对屏幕时是否可见

3d旋转

.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盒子

.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动画

1过渡：transition，transform，只能定义首位。

2关键帧keyframes：通过@keyframes,通过关键词from和to等价于0%-100%,首尾必须要有

@keyframes animationname{keyframes-selector{}}

keyframes-selector动画时长，from-to或者0%-100%(推荐)

animation:简写属性，除了animation-play-state

animation:aa 2s linear 2s infinte alternate;

animation-name:动画名称

animation-duration:时间，默认0

animation-timing-function:3d元素过渡效果的曲线,参考transition

animation-delay:何时开始，默认0

animation-iteration-count:播放次数，默认1,infinite无限

animation-direction:normal/alternate(奇数正常播放，偶数方向播放)

animation-play-state:播放状态，结合js使用，paused,running

step-start 立马跳到下一帧;等同于 steps(1,start). steps(10,start)动画分成10步，动画执行时为开始左侧端点的部分为开始。

step-end 立马跳到下一帧;等同于 steps(1,end). steps(10,end)动画分成10步，动画执行时以结尾端点为开始，默认值为 end。

css3动画

.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;}} */ 
 

猜你喜欢