平面转换
位移
trans 开头 水平距离 垂直距离
快捷敲代码技巧 trf :t
transform:translate
.son{
width: 100px;
height: 100px;
background-color: #f40;
/* 过渡 让位移跟平滑 */
transition: all 0.5s;
}
.box:hover .son{
/* 位移的距离 水平距离 垂直距离 */
/* transform:translate(100px,60px) */
/* 百分比：盒子自身的尺寸百分比 给正则右下 负则左上位移 */
/* transform:translate(100%,60%) */
transform:translate(-100%,-60%)
}
单方向位移
/* 位移的距离 水平距离 写一个 */
transform:translate(100px)
/* X水平位移的距离 */
transform:translateX(100px)
/* Y垂直位移的距离 */
transform:translateY(100px)
子绝父相水平居中
先让子盒子往右移动父盒子的一半 left：50% 再让子盒子往左移动自己的一半：transform：translateX(-50%)
/* 单方向水平 */
transform：translateX(-50%)
/*水平跟垂直的自身位移 */
transform：translate(-50%，-50%)
双开门伪元素
.box{
margin: 50px auto;
width: 1366px;
height: 600px;
background-image: url("../day01/01-课堂案例/02-平面转换/03-案例-双开门/images/bg.jpg");
overflow: hidden;
/* 溢出隐藏 */
}
.box::before,
.box::after{
float: left;
content: "";
width: 50%;
height: 600px;
background-image: url("../day01/01-课堂案例/02-平面转换/03-案例-双开门/images/fm.jpg");
transition: all .5s;
}
.box::after{
background-position: right 0;
}
.box:hover::after{
/* 让盒子往右平移 */
transform: translateX(100%);
}
.box:hover::before{
/* 让盒子往左平移 */
transform: translateX(-100%);
}
旋转
transform: rotate(角度); 角度单位：deg 取值正负值均可 旋转必须加过渡
img:hove{
/* 正为顺 负为逆（-360deg） */
transform: rotate(360deg);
}
transform-origin:(水平位置 垂直位置); 改变原点位置
水平方向方位词 ：left左 right 右 center中 垂直方向方位词 ：top 上 bottom下 百分比或px数值
img{
transform-origin:right bottom;
}
修改元素旋转中心点
transform-origin: 方位名词;
transform-origin:top left；（左上角）
transform-origin：right bottom； （右上角）
transform-origin: 像素;
transform-origin: 0px 0px；（左上角）
transform-650px 650px；（右上角）
transform-origin: 百分比单位;
transform-origin:100% 100%； （相对于自身尺寸）
多重转换
复合属性连写 旋转往后放
.box{
width: 800px;
height: 200px;
border: 1px solid #000;
}
img{
width: 200px;
transition: all 6s;
}
.box:hover img{
transform: translateX(600px) rotate(720deg);
}
缩放
transform:scale(缩放倍数) 1=原比例不变 父盒子加透明opacity：0 让
transform:scale(2)
水平居中缩放
.box::after{
position: absolute;
top: 50%;
left: 50%;
width: 58px;
height: 58px;
content: "";
/* margin-top: -29px; */
/* margin-left: -29px; */
/* 要注意层叠性 需要用复合属性连写 */
transform: translate(-50%,-50%) scale(5) ;
background: url("../day01/01-课堂案例/02-平面转换/08-和平精英-缩放/images/play.png");
opacity: 0;
transition: all .5s;
}
.box:hover::after{
opacity: 1;
transform: translate(-50%,-50%) scale(1);
}
3d缩放 对空间的立体 物体做缩放- 立方体
1 2d缩放 只能缩放 平面图形的 宽度和高度
2 3d缩放 可以缩放 立体物体 的 宽度和高度和厚度
scaleX 缩放宽度 scaleY 缩放高度
scaleZ 缩放厚度 (前 -后 两个面的距离) scale3d(1，1，1)同时 对 长宽高 做缩放
渐变
1、渐变颜色用过渡不生效
2、背景图片可以过渡 但比较突兀 不完善 工作慎用（浏览器不支持）
3、不管 就想要实现 鼠标移入 图片切换的渐变的过程！！
1、换另外的思路来实现
div里面包装两个图片标签
1、先让一个图片隐藏 另一个图片显示
2、div hover再让另外一个图片隐藏 另一个图片显示
3、定位加透明度来实现 透明度有过渡
4、display：none 渐变 背景图片 没有过渡效果
.box{
width: 300px;
height: 200px;
/* background-image背景颜色属性 linear-gradient 产生渐变 */
background-image: linear-gradient(
/* 输入需要的颜色 没有规定数量 */
transparent,
rgba(0,0,0,.6)
);
}
综合显示效果
<style>
a{
text-decoration: none;
color: #fff;
}
.box{
position: relative;
margin: 100px auto;
width: 500px;
height: 800px;
/* 溢出隐藏 */
overflow: hidden;
}
.son{
width: 500px;
height: 800px;
}
.son img{
transition: all 1s;
}
.box:hover img{
/* 缩放倍数 */
transform: scale(1.5);
}
.mask{
position: absolute;
left: 0;
bottom: 0;
width: 500px;
height: 800px;
opacity: 0;
background-image: linear-gradient(
transparent,
rgba(0,0,0,.6)
);
transition: all .6s;
}
.box:hover .mask{
opacity: 1;
}
.box p{
position: absolute;
left: 10px;
bottom: 10px;
width: 300px;
height: 50px;
/* 定位层级 */
z-index: 1;
transition: all .5s;
}
.box:hover p{
transform: translateY(-50%);
}
</style>
</head>
<body>
<div class="box">
<a href="#">
<div class="son"><img src="../../黑马开学/前端的学习01/图片/无始.jpg" alt=""></div>
<p>仙路尽头谁为峰，一遇无始道成空</p>
<div class="mask"></div>
</a>
</div>
渐变多样化设置
1、多种渐变色 background-image: linear-gradient(black,red,blue,orange,skyblue,);
多种渐变色
background-image: linear-gradient(
black,red,blue,orange,skyblue,);
2、渐变色 分层 百分比到百分比逐渐变化
background-image: linear-gradient(black 20%, red 50%, blue 70%, orange 90%, skyblue 100%);
百分之零到百分百的逐渐变化
background-image: linear-gradient(
black 20%,
red 50%,
blue 70%,
orange 90%,
skyblue 100%);
3、渐变颜色方向 方位名词 改方向 默认值 to bottom 从上到下 /* *从右到左 /右上角 /：background-image: linear-gradient(to right top, black,red);
方位名词 改方向 默认值 to bottom 从上到下 /* **从右到 左 /右上角 */：
background-image: linear-gradient(to right top, black,red);
4、渐变颜色角度 background-image: linear-gradient(0deg, black,red);
<style>
div{
width: 300px;
height: 300px;
margin: 100px auto;
box-sizing: border-box;
/* 多种渐变 */
/* background-image: linear-gradient(black,red,blue,orange,skyblue,); */
/* 分层渐变 百分比到百分比逐渐变化 */
/* background-image: linear-gradient(
black 20%,
red 50%,
blue 70%,
orange 90%,
skyblue 100%); */
/* 方位名词 改方向 默认值 to bottom 从上到下 */
/* 从右到左 /右上角 */
background-image: linear-gradient(to right top, black,red);
/* 角度 */
background-image: linear-gradient(0deg, black,red);
}
</style>
</head>
<body>
<div></div>
动态调式谷歌浏览器中的px的时候
1、直接按下 箭头上下键 1个px给你 微调
2、直接按下 alt+箭头上下键 0.1个px给你 微调
2、直接按下 shift+箭头上下键 10个px给你 微调
2、直接按下 Ctrl+箭头上下键 100个px给你 微调
空间转换
空间转换效果 要先给父级元素加perspective: 取值800~1200的值; (透视效果 近大远小 近实远虚)
perspective: 1000px;
空间近大远小的效果
transform: translateZ(100px)
空间旋转效果
水平旋转 正为从下往上 负为从上往下
transform: rotateX(360deg);
垂直旋转 正为从左往右 负为从右往左
transform: rotateY(360deg);
复合属性连写
/* transform: translateX(300px) translateY(300px) translateZ(50px); */
/* 3d属性连写 两行代码是等价的 */
transform: translate3d(300px,300px,-300px);
立体图形
盒子父元素添加transform-style: preserve-3d； 使子元素处于真正的3d空间
空间内，转换元素都有自已独立的坐标轴，互不干扰
transform-style: preserve-3d;
简易立体图形
必须给父盒子添加： transform-style: preserve-3d; 才能生效立体
.head{
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
background-color: skyblue;
transition: all 1s;
transform-style:preserve-3d;
}
.head div{
position: absolute;
left: 0;
bottom: 0;
width: 200px;
height: 200px;
}
.header{
background-color: pink;
transform: translateZ(200px);
}
.box{
background-color: #ccc;
}
.head:hover{
transform: rotateY(90deg);
}
</style>
</head>
<body>
<div class="head">
<div class="header">前面</div>
<div class="box">后面</div>
</div>
正方形立体案例
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 200px;
height: 200px;
position: relative;
margin: 100px auto;
transform-style: preserve-3d;
transition: 1s;
transform: rotate3d(1,1,0,30deg);
}
.box div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: 1s;
}
.front {
transform: translateZ(100px);
background-color: salmon;
}
.back {
transform: translateZ(-100px);
background-color: seagreen;
}
.left {
transform: translateX(-100px) rotateY(90deg);
background-color: lawngreen;
}
.right {
transform: translateX(100px) rotateY(90deg);
background-color: yellow;
}
.up {
transform: translateY(-100px) rotateX(90deg);
background-color: aqua;
}
.bottom {
transform: translateY(100px) rotateX(90deg);
background-color: purple;
}
.box:hover{
/* 让父盒子本身转动 */
transform: rotateX(-90deg);
}
</style>
</head>
<body>
<div class="box">
<div class="front">前</div>
<div class="back">后</div>
<div class="left">左</div>
<div class="right">右</div>
<div class="up">上</div>
<div class="bottom">下</div>
</div>
