从头学前端-CSS3提升-续

CSS3 2D转换

关键字：transform

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

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

• 旋转 rotate
  ```css

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

- 2d转换中心点 transform-origin
```css
        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);
        }