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 {
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{
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{
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轴 放大） 再 旋转
transform-orign
transform-orign: xxx; 可设置变形的原点
默认是在中间，center center
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{
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 {
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%;
45%;
/* animation: run 43200s infinite linear; */
/* 加速版 */
animation: run 3600s infinite linear;
}
.hour {
8px;
background-color: black;
}
/* 分针 */
.min-box {
60%;
height: 60%;
/* animation: run 3600s infinite steps(60); */
/* 加速版 */
animation: run 300s infinite steps(60);
}
.min {
5px;
background-color: chocolate;
}
/* 秒针 */
.sec-box {
80%;
height: 80%;
/* animation: run 60s infinite steps(60); */
/* 加速版 */
animation: run 5s infinite steps(60);
}
.sec {
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 {
200px;
height: 200px;
margin: 100px auto;
/* 设置3d变形效果 */
transform-style: preserve-3d;
/* 动画 */
animation: run 20s infinite linear;
}
.cube>div {
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>
效果
