CSS3 2D转换

关键字：transform

• 移动：沿着x,y轴移动，不会影响盒子的位置，对行内元素没有效果

        div {width: 100px;height: 100px;background-color: rebeccapurple;transform: translate(100px,100px);transform: translateX(100px);transform: translateY(100px);}

• 旋转 rotate

  	div {width: 200px;height: 200px;background-color: aqua;/* transform: rotate(30deg); */transition:  all 1s;}div:hover {transform: rotate(360deg);}

• 2d转换中心点 transform-origin

        div {width: 200px;height: 200px;border: 1px solid #000;transition:  all 1s;transform-origin: left bottom;transform-origin: 300px 300px;}div:hover {transform: rotate(220deg)}

• 缩放 scale：可以设置转换中心点，不影响其他盒子

  p {width: 200px;height: 200px;background-color: red;} p:hover {transform: scale(2,1);transform: scaleX(3);transform: scale(2);transform: scale(0.5);}

• 转换综合写法: 以空格隔开，顺序会影响效果，最好位移在前

      li:hover {transform: translate(0px,10px) rotate(90deg) scale(1.2);}

CSS3 动画

关键字： animation

• 用keyframes定义动画并使用

 @keyframes move {0%{transform: translateX(0px);}100%{transform: translateX(1000px);}}div {width: 200px;height: 200px;background-color: red;animation: move 2s ;}

动画相关属性：

• 使用多个状态和属性

   @keyframes move {from {transform: translateX(0px);}50% {transform: translate(500px, 200px);}60% {transform: translateX(1000px);}to {transform: translateX(0);}}div {width: 200px;height: 200px;background-color: red;animation: move 2s ;animation-iteration-count: infinite;animation-direction: alternate;/* animation-fill-mode: forwards; */}div:hover {animation-play-state: paused;}

CSS3 3D转换

• 透视 perspective ：写到被观察元素的父盒子上；

• 移动： translate3d:

   body {perspective: 105px;}div {width: 100px;height: 100px;background-color: #663399;transform: translate3d(100px,100px,10px);}

• 旋转 rotate3d:

 body {perspective: 300px;}img {display: block;margin: 20px 200px;width: 200px;transition: all 2s;}img:hover {transform: rotateX(360deg);transform: rotateY(180deg);transform: rotateZ(90deg) ;transform: rotate3d(1,1,0,270deg);}

• 3d呈现 transform-style:

 body {perspective: 300px;}
box {position: relative;width: 200px;height: 200px;margin: 0 auto;transform-style: preserve-3d;transition:  all 2s;}.box:hover {transform:  rotateY(180deg);}.box div {position: absolute;top:0;left: 0;width: 100%;height: 100%;background-color: aqua;}.box div:last-child {background-color: blue;transform: rotateX(60deg);}