css3 變形
阿新 • • 發佈：2021-01-08
transform
transform 變形 是指通過改變元素的形狀或位置
變形不會影響頁面的佈局，也就是說不脫離文件流（和相對定位 relative 很像）
使用 transfrom: 來設定元素的變形效果
注意：選擇器裡 只能設定一個 transform ，所以需要把所有的效果都在一起，通過空格隔開
transform: translateX(-50%) translateY(-50%);
其他相關重要屬性
html{ /* 設定視距，才能看到效果 */ perspective: 800px; } .box{ /* 設定3d變形效果 */ transform-style: preserve-3d; /* 變形的原點 預設值 center*/ transform-origin:center center; }
translate 平移
-
translateX() 沿著X軸方向平移
-
translateY() 沿著Y軸方向平移
-
translateZ() 沿著Z軸方向平移
注意：平移元素，百分比是相對於自身計算的，這也是和相對定位的區別
元素居中的效果
.posit { width: 100px; height: 100px; position: absolute; left: 0; right: 0; left: 0; bottom: 0; margin: auto; /* 絕對定位居中利用4個偏移量為0 盒子模型佈局等式 來使margin為auto來定位 但其元素的長寬大小是必須給定的 */ } .trans { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); /* 而在元素大小不確定，使用絕對定位+位移來實現居中 */ }
translateZ
z軸平移，調整元素在z軸的位置，正常情況就是調整元素和人眼之間的距離
距離越大，元素離人就越近
z軸平移 屬於立體效果（近大遠小），預設情況下網頁是不支援透視，如果需要看見效果
就必須設定網頁的視距
html{ /* 設定當前網頁的視距為800px，人眼距離網頁的距離 */ perspective: 800px; } body{ border: 1px red solid; background-color: rgb(241, 241, 241); } .box1{ width: 200px; height: 200px; background-color: #bfa; margin: 200px auto; transition:2s; } body:hover .box1{ transform: translateZ(600px); }
rotate 旋轉
通過旋轉可以使元素沿著x y 或 z旋轉指定的角度
- rotateX()
- rotateY()
- rotateZ()
旋轉值必須帶有單位 deg 度 turn 圈
transform: rotateY(45deg) rotateZ(.5turn)
同樣，若要有3D效果，需設定視距 perspective
html{
perspective: 800px;
}
body{
border: 1px red solid;
background-color: rgb(241, 241, 241);
}
.box1{
width: 320px;
height: 320px;
background-color: #bfa;
margin: 200px auto;
transition:2s;
/* 是否顯示元素的背面 */
/* backface-visibility: hidden; */
}
body:hover .box1{
transform: rotateY(360deg) translateZ(300px);
/* 旋轉 和 平移的先後也是有很大區別
先旋轉 再 平移（z軸 放大）
先平移（z軸 放大） 再 旋轉 */
/* transform: translateZ(300px) rotateY(180deg); */
}
先 旋轉 再 平移（z軸 放大）
先 平移（z軸 放大） 再 旋轉
scale 比例縮放
對元素進行縮放的函式：
- scaleX() 水平方向縮放
- scaleY() 垂直方向縮放
- scaleZ() Z軸方向。。。不常用
- scale() 雙方向的縮放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.img-wrapper{
width: 200px;
height: 200px;
border: 1px red solid;
overflow: hidden;
}
img{
transition: .2s;
}
.img-wrapper:hover img{
transform:scale(1.2);
}
</style>
</head>
<body>
<div class="img-wrapper">
<img src="an.jpg" width="100%">
</div>
</body>
</html>
效果
練習
鐘錶
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鐘錶</title>
<style>
/* 設定錶盤 */
.container {
width: 400px;
height: 400px;
margin: 50px auto;
background-image: url("../exercise/img/13/bg.png");
background-size: cover;
/* 開啟定位 */
position: relative;
}
/* 指標盒子居中 */
.container>div {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
/* 指標居中 */
.container>div>div {
margin: 0 auto;
/* 所有的都是50% */
height: 50%;
}
/* 時針 */
.hour-box {
height: 45%;
width: 45%;
/* animation: run 43200s infinite linear; */
/* 加速版 */
animation: run 3600s infinite linear;
}
.hour {
width: 8px;
background-color: black;
}
/* 分針 */
.min-box {
width: 60%;
height: 60%;
/* animation: run 3600s infinite steps(60); */
/* 加速版 */
animation: run 300s infinite steps(60);
}
.min {
width: 5px;
background-color: chocolate;
}
/* 秒針 */
.sec-box {
width: 80%;
height: 80%;
/* animation: run 60s infinite steps(60); */
/* 加速版 */
animation: run 5s infinite steps(60);
}
.sec {
width: 3px;
background-color: red;
}
/* 關鍵幀 */
@keyframes run {
from {
transform: rotateZ(0);
}
to {
transform: rotateZ(1turn);
}
}
</style>
</head>
<body>
<div class="container">
<!-- 時針 -->
<div class="hour-box">
<div class="hour"></div>
</div>
<!-- 分針 -->
<div class="min-box">
<div class="min"></div>
</div>
<!-- 秒針 -->
<div class="sec-box">
<div class="sec"></div>
</div>
</div>
</body>
</html>
效果
復仇者聯盟
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>復仇者聯盟</title>
<style>
html {
/* 設定視距 */
perspective: 800px;
}
.cube {
width: 200px;
height: 200px;
margin: 100px auto;
/* 設定3d變形效果 */
transform-style: preserve-3d;
/* 動畫 */
animation: run 20s infinite linear;
}
.cube>div {
width: 200px;
height: 200px;
position: absolute;
background-repeat: no-repeat;
/* 透明度 */
/* opacity: .7; */
}
/* 左 */
.box1 {
background-image: url("../exercise/img/14/1.jpg");
transform: rotateY(-90deg) translateZ(100px);
}
/* 右 */
.box2 {
background-image: url("../exercise/img/14/2.jpg");
transform: rotateY(90deg) translateZ(100px);
}
/* 上 */
.box3 {
background-image: url("../exercise/img/14/3.jpg");
transform: rotateX(90deg) translateZ(100px);
}
/* 下 */
.box4 {
background-image: url("../exercise/img/14/4.jpg");
transform: rotateX(-90deg) translateZ(100px);
}
/* 後 */
.box5 {
background-image: url("../exercise/img/14/5.jpg");
transform: rotateY(180deg) translateZ(100px);
}
/* 前 */
.box6 {
background-image: url("../exercise/img/14/6.jpg");
transform: translateZ(100px);
}
/* 關鍵幀 */
@keyframes run {
from {
transform: rotateX(0) rotateZ(0);
}
to {
transform: rotateX(1turn) rotateZ(1turn);
}
}
</style>
</head>
<body>
<div class="cube">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
</div>
</body>
</html>
效果