Penjelasan terperinci tentang pelaksanaan penskalaan dan kesan putaran dalam susun atur fleksibel CSS Flex-tutorial css-php.cn

Penjelasan terperinci tentang pelaksanaan penskalaan dan kesan putaran dalam susun atur fleksibel CSS Flex

WBOY

Lepaskan： 2023-09-28 16:09:37

asal

1604 orang telah melayarinya

. Antaranya, penskalaan dan putaran adalah salah satu kesan biasa Artikel ini akan memperkenalkan secara terperinci cara melaksanakan kesan penskalaan dan putaran dalam susun atur CSS Flex dan memberikan contoh kod tertentu.

详解Css Flex 弹性布局中的缩放与旋转效果实现 Pertama sekali, mari kita fahami konsep asas dan penggunaan reka letak CSS Flex. Reka letak CSS Flex adalah berdasarkan konsep bekas dan item. Bekas merujuk kepada elemen yang atribut paparannya ditetapkan kepada flex atau inline-flex, dan item tersebut merujuk kepada elemen anak langsung dalam bekas. Bekas mempunyai beberapa sifat untuk mengawal susunan dan penjajaran item, seperti flex-direction, justify-content, align-item, dsb.

Pelaksanaan kesan zum:

Untuk mencapai kesan penskalaan dalam reka letak CSS Flex, kita boleh menggunakan atribut transformasi untuk mencapainya. Atribut transformasi ialah sifat dalam CSS3, yang boleh mencapai kesan seperti penskalaan, putaran dan anjakan elemen.

Untuk mencapai kesan penskalaan, kita boleh menggunakan atribut skala. Atribut skala boleh menskalakan elemen mengikut nisbah yang ditentukan Nisbah lalai ialah 1. Nilai yang lebih besar daripada 1 menunjukkan pembesaran, dan nilai yang kurang daripada 1 menunjukkan pengurangan.

Contoh kod adalah seperti berikut:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 300px;
      }
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
        transition: transform 0.3s;
      }
      .box:hover {
        transform: scale(1.2);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box"></div>
    </div>
  </body>
</html>

Salin selepas log masuk

Dalam kod di atas, kami mencipta bekas yang mengandungi kotak. Saiz awal kotak ialah 100px*100px, dan warna latar belakang ditetapkan kepada merah. Dengan pemilih kelas pseudo :hover, apabila tetikus melayang di atas kotak, ia akan dizum kepada 1.2 kali ganda saiz asalnya. Melalui atribut peralihan, kami menambah kesan animasi untuk menjadikan proses penskalaan lebih lancar.

Pelaksanaan kesan putaran:

Untuk mencapai kesan putaran dalam reka letak CSS Flex, kita juga boleh menggunakan atribut transformasi. Atribut putar atribut transform boleh mencapai kesan putaran elemen. Atribut putar boleh menerima nilai sudut sebagai parameter, menunjukkan bahawa elemen diputar mengikut sudut yang ditentukan.

Contoh kod adalah seperti berikut:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 300px;
      }
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
        transition: transform 0.3s;
      }
      .box:hover {
        transform: rotate(45deg);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box"></div>
    </div>
  </body>
</html>

Salin selepas log masuk

Dalam kod di atas, kami mencipta bekas dan kotak Begitu juga, melalui pemilih kelas pseudo :hover, apabila tetikus melayang di atas kotak, ia diputar 45 darjah. Begitu juga, kami menambah kesan animasi melalui sifat peralihan.

Melalui contoh kod di atas, kita dapat melihat bahawa tidak rumit untuk mencapai kesan penskalaan dan putaran dalam susun atur CSS Flex, dan ia boleh dicapai dengan bantuan atribut transformasi. Pada masa yang sama, kami juga boleh menambah animasi peralihan untuk menjadikan kesan lebih lancar dan lebih cantik.

Ringkasan:

Artikel ini memperincikan cara melaksanakan kesan penskalaan dan putaran dalam reka letak CSS Flex dan menyediakan contoh kod khusus. Dengan menggunakan atribut transform, kita boleh mencapai kesan ini dengan mudah. Saya harap artikel ini dapat membantu pembaca lebih memahami dan menggunakan kesan penskalaan dan putaran dalam reka letak CSS Flex.

Atas ialah kandungan terperinci Penjelasan terperinci tentang pelaksanaan penskalaan dan kesan putaran dalam susun atur fleksibel CSS Flex. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!