Hướng dẫn css rotate plus to cross - css xoay cộng để vượt qua

Question

Tôi cần một thiết kế CSS trong đó nút vuông lơ lửng thay đổi cộng với dấu hiệu để vượt qua các hình vuông đến vòng tôi trong bản demo ở đây. Nhưng tôi không thể thay đổi như yêu cầu của mình

Nội dung chính Show

Làm thế nào để bạn thêm xoay trong CSS?
Transformorigin là gì?
Làm cách nào để xoay Div 90 độ?
Làm cách nào để xoay hộp div?

https://codepen.io/tapos007/pen/odxQgW

    		$(function() {
        //do something
    
          $(".btn-square").click({animateIn: "circleShape", animateOut: "squareShape"}, animate_function);
     
          
          function animate_function(event){
              if( $(this).hasClass(event.data.animateIn) ) {
                    $(this).removeClass(event.data.animateIn).addClass(event.data.animateOut);
                   }
                else if( $(this).hasClass(event.data.animateOut) ) {
                   $(this).removeClass(event.data.animateOut).addClass(event.data.animateIn);
                }
                else {
                  $(this).addClass('animated ' + event.data.animateIn);
                }     
          }
          
      //end do something     
    	});

    //Variables
    $btn-round-size:100px;
    $btn-round-rotate:135deg;
    $btn-default-color:blue;
    $btn-close-color:red;
    
    //Styles
    body {
      font-family: sans-serif;
    }
    
    .btn-round {
      width:$btn-round-size;
    	height:$btn-round-size;
    	border-radius:$btn-round-size;
      background-color:$btn-default-color;
    }
    
    .btn-square {
      width:$btn-round-size;
    	height:$btn-round-size;
      background-color:blue;
    }
    
    .close{
      position: relative;
      display: inline-block;
      width: 50px;
      height: 50px;
      top:25px;
      left:25px;
      overflow: hidden;
    
      &::before, &::after {
        content: '';
        position: absolute;
        height: 2px;
        width: 100%;
        top: 50%;
        left: 0;
        margin-top: -1px;
        background: #fff;
      }
      &::before {
         transform:rotate(0deg);
        }
     &::after {
         transform:rotate(90deg);
        }
    } 
    
    
    
    //Animations
    .animated {
      -webkit-animation-duration: 1s;
      animation-duration: 1s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }
    
    @-webkit-keyframes plusButton {
      from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, -$btn-round-rotate);
        transform: rotate3d(0, 0, 1, -$btn-round-rotate);
        background-color:$btn-close-color;
      }
    
      to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: none;
        transform: none;
        background-color:$btn-default-color;
      }
    }
    
    @keyframes plusButton {
      from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, $btn-round-rotate);
        transform: rotate3d(0, 0, 1, $btn-round-rotate);
        background-color:$btn-close-color;
      }
    
      to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: none;
        transform: none;
        background-color:$btn-default-color;
      }
    }
    
    .plusButton {
      -webkit-animation-name: plusButton;
      animation-name: plusButton;
    }
    
    
    @-webkit-keyframes closeButton {
      from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: none;
        transform: none;
        background-color:$btn-default-color;
      }
    
      to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, $btn-round-rotate);
        transform: rotate3d(0, 0, 1, $btn-round-rotate);
        background-color:$btn-close-color;
      }
    }
    
    @keyframes closeButton {
      from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: none;
        transform: none;
        background-color:$btn-default-color;
      }
    
      to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, $btn-round-rotate);
        transform: rotate3d(0, 0, 1, $btn-round-rotate);
        background-color:$btn-close-color;
      }
    }
    
    .closeButton {
      -webkit-animation-name: closeButton;
      animation-name: closeButton;
    }
    
    @-webkit-keyframes circleShape {
      from {
        -webkit-transform-origin: center;
        transform-origin: center;
        background-color:$btn-default-color;
      }
    
      to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, $btn-round-rotate);
        transform: rotate3d(0, 0, 1, $btn-round-rotate);
        background-color:$btn-close-color;
        border-radius: $btn-round-size;
      }
    }
    
    @keyframes circleShape {
      from {
        -webkit-transform-origin: center;
        transform-origin: center;
        background-color:$btn-default-color;
      }
    
      to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, $btn-round-rotate);
        transform: rotate3d(0, 0, 1, $btn-round-rotate);
        background-color:$btn-close-color;
        border-radius: $btn-round-size;
      }
    }
    
    .circleShape {
      -webkit-animation-name: circleShape;
      animation-name: circleShape;
    }
    
    @-webkit-keyframes squareShape {
      from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, $btn-round-rotate);
        transform: rotate3d(0, 0, 1, $btn-round-rotate);
        background-color:$btn-close-color;
        border-radius: $btn-round-size;
      }
    
      to {
        -webkit-transform-origin: center;
        transform-origin: center;
        background-color:$btn-default-color;
        border-radius: 0px;
      }
    }
    
    @keyframes squareShape {
      from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, $btn-round-rotate);
        transform: rotate3d(0, 0, 1, $btn-round-rotate);
        background-color:$btn-close-color;
        border-radius: $btn-round-size;
      }
    
      to {
        -webkit-transform-origin: center;
        transform-origin: center;
        background-color:$btn-default-color;
        border-radius: 0px;
      }
    }
    
    .squareShape {
      -webkit-animation-name: squareShape;
      animation-name: squareShape;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-square">
      <span class="close"></span>
    </div>

Làm thế nào để bạn thêm xoay trong CSS?

Css rothate () hàm rothate () chấp nhận một đối số: góc mà bạn muốn xoay phần tử web của mình. Bạn có thể xoay một phần tử theo chiều kim đồng hồ hoặc ngược chiều kim đồng hồ. Chúng ta hãy xem cú pháp cho hàm xoay (): Biến đổi: Xoay (góc);transform: rotate(angle);

Transformorigin là gì?

Transform-Origin: dưới cùng bên phải 60px;Xoay tôi!Nguồn gốc biến đổi là điểm xung quanh mà một phép biến đổi được áp dụng.Ví dụ, nguồn gốc biến đổi của hàm xoay () là tâm của vòng quay.Trên thực tế, thuộc tính này bao bọc một cặp bản dịch xung quanh các biến đổi khác của yếu tố.the point around which a transformation is applied. For example, the transform origin of the rotate() function is the center of rotation. In effect, this property wraps a pair of translations around the element's other transformations.

Làm cách nào để xoay Div 90 độ?

Một phần tử có thể được xoay 90 độ bằng cách sử dụng thuộc tính biến đổi.Thuộc tính này được sử dụng để di chuyển, xoay, quy mô và các loại khác để thực hiện các loại chuyển đổi khác nhau cho các yếu tố.Hàm biến đổi xoay () có thể được sử dụng làm giá trị để xoay phần tử.by using the transform property. This property is used to move, rotate, scale and others to perform various kinds of transformation to elements. The rotate() transformation function can be used as the value to rotate the element.

Làm cách nào để xoay hộp div?

Phương thức ROTATEZ ().Phương thức rotatez () xoay một phần tử xung quanh trục z của nó ở một mức độ nhất định.Đây là một yếu tố div bình thường.rotateZ() Method. The rotateZ() method rotates an element around its Z-axis at a given degree. This a normal div element.

programming css What is Transformorigin? transform: rotate css Rotate image CSS