Properti AS sintaks
USS transisi

USS mengubah

Sifat transformasi menerapkan transformasi 2D ke elemen visual. Anda dapat menggunakannya untuk memutar, mengukur, atau memindahkan elemen visual.

Jika Anda mengubah tata letak elemen, Rekulasi Unity tata letak elemen lain dalam hierarki yang sama. Rekalkulasi ini dapat mengurangi tingkat bingkai animasi. Menerapkan perubahan pada elemen mengurangi rekalkulasi karena tidak mengubah tata letak elemen lain dalam hierarki.

Ini mungkin untuk menggunakan transformasi untuk menentukan tampilan statis dari elemen visual. Namun, transformasi yang terbaik digunakan untuk perubahan dan animasi. Misalnya, jika Anda ingin membuat elemen visual goyang ketika peristiwa terjadi dalam aplikasi, mengatur posisi elemen visual menggunakan sifat tata letak biasa seperti top dan left, dan kemudian gunakan translate untuk menyelaraskan kerabat offset ke posisi awal.

Transform termasuk sifat berikut:

Property USS syntax Description
Transform Origin transform-origin Mewakili titik asal di mana rotasi, scaling, dan terjemahan terjadi.
Translate translate Reposisi elemen visual dalam arah horisontal atau vertikal.
Scale scale Mengubah ukuran yang jelas, bantalan, perbatasan, dan margin elemen visual. Nilai negatif flip elemen visual sepanjang sumbu skala.
Rotate rotate Memutar elemen visual. Nilai positif mewakili rotasi searah jarum jam dan nilai negatif mewakili rotasi berlawanan arah jarum jam. Anda dapat mengatur rotasi dengan unit deg, grad, rad, atau turn. Untuk informasi lebih lanjut tentang unit ini, lihat Login Halaman Web Docs pada jenis data CSS <angle> CSS data type.

Note: Semua transformasi dilakukan dalam urutan berikut:

  1. Scale
  2. Rotate
  3. Translate

Anda dapat mengatur sifat transformasi untuk elemen visual menggunakan kontrol dalam file Pembuat UI, dalam file USS, atau menggunakan skrip C#.

Kontrol Transform di Pembuat UI

Anda dapat menggunakan kontrol di bagian Transform dari InspectorA Unity window that displays information about the currently selected GameObject, asset or project settings, allowing you to inspect and edit the values. More info
See in Glossary di UI(User Interface) Memungkinkan pengguna untuk berinteraksi dengan aplikasi Anda. Unity saat ini mendukung tiga sistem UI. More info
Lihat di Glossary Builder untuk mengatur sifat transformasi dari elemen visual.

Asal Pivot

Widget Pivot Origin menetapkan properti asal transformasi. Untuk menggunakannya, lakukan salah satu berikut:

  • Klik titik di widget untuk mengatur asal ke sudut, pusat tepi, atau pusat. Anda juga dapat mendefinisikan nilai-nilai menggunakan keyboard. Ketika widget fokus, gunakan tombol panah untuk menentukan titik di widget.
  • Masukkan nilai untuk X dan Y dan tentukan unit.

Tip: Anda dapat memasukkan % atau px setelah nilai. Ini secara otomatis mengubah unit yang ditampilkan dalam pemilih unit. Anda juga dapat menyeret untuk menentukan nilai dalam kotak X dan Y.

Note: Nilai default untuk asal transformasi adalah pusat.

Jika Anda menggunakan persentase untuk nilai X dan Y, widget menunjukkan titik asal baru ketika Anda mengedit kotak teks X dan Y.

Jika Anda menentukan titik asal transformasi di luar elemen, seperti memiliki nilai kurang dari 0% atau lebih dari 100%, widget menunjukkan arah sumbu X dan Y.

Translate

Kontrol Translate menetapkan properti menerjemahkan. Untuk menggunakannya, masukkan nilai dalam kotak X dan Y dan menentukan unit.

Tip: Anda dapat memasukkan % atau px setelah nilai. Ini secara otomatis mengubah unit yang ditampilkan dalam pemilih unit. Anda juga dapat menyeret untuk menentukan nilai dalam kotak X dan Y.

Scale

Kontrol Scale menetapkan properti skala. Untuk menggunakannya, masukkan nilai dalam kotak X dan Y dan menentukan unit.

Tip: Anda dapat memasukkan % atau px setelah nilai. Ini secara otomatis mengubah unit yang ditampilkan dalam pemilih unit. Anda juga dapat menyeret untuk menentukan nilai dalam kotak X dan Y.

Rotate

Kontrol Rotate menetapkan properti putar. Untuk menggunakannya, masukkan nilai dan tentukan unit.

Tip: Anda dapat mengetik deg, grad, rad, atau turn setelah nilai dalam kotak Rotate. Ini secara otomatis mengubah unit yang ditampilkan dalam pemilih unit.

USS mengubah properti

Anda dapat menggunakan aturan styling untuk mengatur sifat transformasi untuk elemen visual. Anda dapat mengatur aturan styling dalam file ASS atau inline dalam file UXML.

transform-origin

Properti transform-origin menetapkan asal transformasi sepanjang sumbu X dan Y pada pixelsUnit terkecil dalam gambar komputer. Ukuran piksel tergantung pada resolusi layar Anda. Pencahayaan pixel dihitung pada setiap piksel layar. More info
Lihat di Glossary atau persentase.

Anda juga dapat menggunakan kata kunci untuk mengatur nilai atribut transform-origin. Kata kunci ini cocok dengan titik-titik di widget di UI Builder. Kata kunci berikut didukung:

Pivot point Keywords
Center
  • center
  • Sitemap (Ini adalah nilai default)center center (This is the default value)
Center of left edge
  • left
  • left center
  • center left
Center of right edge
  • right
  • right center
  • center right
Center of top edge
  • top
  • top center
  • center top
Center of bottom edge
  • bottom
  • bottom center
  • center bottom
Top-left corner
  • top left
  • left top
Top-right corner
  • top right
  • right top
Bottom-left corner
  • bottom left
  • left bottom
Bottom-right corner
  • bottom right
  • right bottom

Examples

transform-origin: 0% 100%;
transform-origin: 20px 10px;
transform-origin: 0px 100%;
transform-origin: 60% 10px;

translate

Properti translate menetapkan terjemahan sepanjang sumbu X dan Y dalam piksel atau persentase relatif terhadap ukuran elemen visual ini. Anda bisa omit Y jika sama dengan X.

Examples

translate: 80%;
translate: 35px;
translate: 5% 10px;
translate: 24px 0%;

scale

Properti scale menetapkan skala di sepanjang sumbu X dan Y dalam piksel atau persentase. Anda bisa omit Y jika sama dengan X.

Kata kunci none menetapkan tidak ada skala.

Examples

scale: 2.5;
scale: -1 1;
scale: none;

rotate

Properti rotate menetapkan rotasi menggunakan nomor atau unit.

Kata kunci none tidak mengatur rotasi.

Examples

rotate: 45deg;
rotate: -100grad;
rotate: -3.14rad;
rotate: 0.75turn;
rotate: none;

Transform C# properti

Anda dapat mengatur sifat transformasi untuk elemen visual dalam skrip C #.

IStyle.transformOrigin

Properti IStyle.transformOrigin menetapkan asal transformasi.

Properti transformOrigin dari style adalah tipe StyleTransformOrigin. constructor mengambil TransformOrigin sebagai argumen. Anda dapat membangun TransformOrigin baru menggunakan nilai X dan nilai Y. Nilai X dan nilai Y adalah tipe Length.

Examples

//This example sets the transform origin of the element to be 100 pixels from the left edge and 50% of the way down from the top edge.
element.style.transformOrigin = new StyleTransformOrigin(new TransformOrigin(new Length(100f, LengthUnit.Pixel), new Length(50f, LengthUnit.Percent)));

Anda dapat menyederhanakan kode di atas sebagai berikut menggunakan konversi implicit:

element.style.transformOrigin = new TransformOrigin(100, Length.Percent(50));

IStyle.translate

Properti IStyle.translate menetapkan terjemahan.

IStyle.translate adalah tipe StyleTranslate. Konstruktor mengambil Translate sebagai argumen. Anda dapat membangun Translate baru menggunakan nilai X dan nilai Y. Nilai X dan nilai Y adalah tipe Length.

Examples

//This example sets the translation of the element. The X-axis is 10% and the Y-axis is 50 pixels.
element.style.translate = new StyleTranslate(new Translate(new Length(10f, LengthUnit.Percent), new Length(50f, LengthUnit.Pixel)));

Anda dapat menyederhanakan kode di atas sebagai berikut menggunakan konversi implicit:

element.style.translate = new Translate(Length.Percent(10), 50);

IStyle.scale

Properti IStyle.scale menetapkan skala.

IStyle.scale adalah tipe StyleScale. StyleScale constructor mengambil Scale sebagai argumen. Anda dapat construct Scale ini dengan Vector2.

Examples

element.style.scale = new StyleScale(new Scale(new Vector2(0.5f, -1f)));

Anda dapat menyederhanakan kode di atas sebagai berikut menggunakan konversi implicit:

element.style.scale = new Scale(new Vector2(0.5f, -1));

IStyle.rotate

Properti IStyle.rotate menetapkan rotasi.

Properti IStyle.rotate adalah tipe StyleRotate. StyleRotate constructor mengambil Rotate sebagai argumen. Anda dapat construct Rotate ini dengan Angle. Anda dapat construct Angle dengan float dan enum AngleUnit opsional, atau Anda dapat menggunakan metode statis Degrees(), Gradians(), Radians(), dan Turns().

Examples

//Rotate by 180 degrees
elements[0].style.rotate = new StyleRotate(new Rotate(new Angle(180f, AngleUnit.Degree)));
//Rotate by 200 gradians
elements[1].style.rotate = new StyleRotate(new Rotate(new Angle(200f, AngleUnit.Gradian)));
//Rotate by pi radians
elements[2].style.rotate = new StyleRotate(new Rotate(new Angle(Mathf.PI, AngleUnit.Radian)));
//Rotate by half a turn
elements[3].style.rotate = new StyleRotate(new Rotate(new Angle(0.5f, AngleUnit.Turn)));

Anda dapat menyederhanakan kode di atas sebagai berikut:

//Rotate by 180 degrees
elements[0].style.rotate = new Rotate(180);
//Rotate by 200 gradians
elements[1].style.rotate = new Rotate(Angle.Gradians(200));
//Rotate by pi radians
elements[2].style.rotate = new Rotate(Angle.Radians(Mathf.PI));
//Rotate by half a turn
elements[3].style.rotate = new Rotate(Angle.Turns(0.5f));

Sumber daya tambahan

Properti AS sintaks
USS transisi