css形变及动画-白红宇


      
     
      变形的子元素
     
    
复制代码

/* 2D变换 */#child{    transform:translate(50px,50px) /* 向右下平移 */              scale(2) /* 放大二倍 */              rotate(30deg) /* 旋转30度 */              skew(30deg,0); /* 扭曲 */}复制代码

/* 3D变换 */#parent{/* 3D变换父盒子设置 */transform-style: preserve-3d; /* 3D变换 */transform: perspective(200px); /* 视距 */}#child{    transform:translate3d(50px,50px,50px)               scale3d(1,1,1)               rotate(1,2,1,30deg);}复制代码

/* transform属性设置 */transform-origin:center;  /* 设置形变中心 */transform-style:preserve-3d; /* 设置3D形变 */perspective:200px; /* 视距 */perspective-origin:center;/* 设置视距基点 */backface-visibility：hidden;/* 3D背面不可见 */复制代码

/* transition */#child{    transition: all 1s linear 2s;    transition-property:all;  /* 指定需要过渡的CSS属性 */    transition-duration:1s; /* 过渡需要的时间 */    transition-timing-function:linear; /* 过渡函数 */    transition-delay:2s; /* 延迟开始过渡的时间 */}复制代码

/* animation */@keyframes mymove {   /* 定义动画 */    0%   {
   top:0px; left:0px; background:red;}    25%  {
   top:0px; left:100px; background:blue;}    50%  {
   top:100px; left:100px; background:yellow;}    75%  {
   top:100px; left:0px; background:green;}    100% {
   top:0px; left:0px; background:red;}}#parent{     /* 简单的样式 */    position:relative;    width:500px;    height:500px;    border:1px solid black;}#child{    position:absolute;    width:100px;    height:100px;    border:1px solid red;    animation: mymove 2s linear 0s 2;  /* 使用动画 */     /* 动画属性介绍 */    animation-name:mymove; /* 指定@keyframes的名字 */    animation-duration:2s; /* 动画持续时间 */    animation-timing-function:linear; /* 动画播放方式 */    animation-delay:0; /* 延迟开始动画的时间 */    animation-iteration-count:infinite; /* 动画循环播放的次数(无限次) */    animation-direction:normal; /* 动画播放的方向 */}复制代码

简单记录一下用法，详细介绍在下面链接