平面转换(2D转换)
使用transform属性
位移
是什么?
相对于元素进行位置移动
有什么用？
改变元素位置，实现页面更酷炫效果
怎么用？
使用translate属性
<title>平面位移的学习</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: skyblue;
/* 使用百分比单位的，相对于自身的尺寸 */
/* transform: translate(50px,30px); */
/* 控制元素只在某一个方向上的位移，有两种方式 */
/* transform: translate(100px,0); */
transform: translate(100px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
拓展
使用绝对定位和外边距实现元素居中
<title>绝对定位和外边距实现元素居中</title>
<style>
.father {
position: relative;
width: 600px;
height: 600px;
background-color: pink;
margin: 100px auto;
}
.son {
position: absolute;
top: 50%;
left:50%;
width: 400px;
height: 400px;
background-color: yellowgreen;
/* margin和定位的百分比单位，都是相对于父元素的
只有位移translate的百分比是相对于自身的
当我们的盒子宽高发生了改变之后margin要重新计算，不方便*/
margin-top: -200px;
margin-left: -200px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
使用绝对定位和位移也可以实现元素居中,更推荐这种
<title>绝对定位和位移实现元素居中</title>
<style>
.father {
position: relative;
width: 600px;
height: 600px;
background-color: pink;
margin: 100px auto;
}
.son {
position: absolute;
top: 50%;
left:50%;
width: 400px;
height: 400px;
background-color: yellowgreen;
/* 设置margin值移动 像素单位 是自身的宽度和高度一半
设置位移 translate 百分比单位 相对于自身的宽度和高度*/
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
旋转
是什么?
相对于元素实现旋转
有什么用？
旋转元素位置，实现页面更酷炫效果
怎么用？
使用rotate属性
注意要写单位deg
<title>平面旋转的学习</title>
<style>
img {
display: block;
margin: 50px auto;
transition: all 1s;
}
img:hover{
transform: rotate(720deg);
}
</style>
</head>
<body>
<img src="./images/rotate.png" alt="">
</body>
拓展
1.旋转原点
transform-origin
<title>设置旋转原点</title>
<style>
img {
display: block;
margin: 50px auto;
transition: all 5s;
border: 1px solid black;
}
img:hover{
/* transform: rotate(720deg); */
/*旋转元素的中心点-方位名词： transform-origin: left top; */
/* 旋转元素的中心点-像素单位： transform-origin: 0px 0px; */
/* 旋转元素的中心点-自身百分比 */
transform-origin:650px 650px;
}
</style>
</head>
<body>
<img src="./images/rotate.png" alt="">
</body>
2.多重转换
建议先平移再旋转
<title>多种平面转换</title>
<style>
.box {
width: 800px;
margin: 100px auto;
border: 1px solid black;
overflow: auto;
cursor: pointer;
}
img {
width: 200px;
transition: all 10s;
box-shadow: 1px 1px 3px 3px pink inset;
}
/* 当位移和旋转共同出现的时候
1.先位移再旋转
2.先旋转再位移
3.以上两种效果会不一样
原因是先旋转的时候物体的旋转的时候坐标系也跟着旋转 */
.box:hover img {
transform: translate(900px) rotate(720deg);
}
</style>
</head>
<body>
<div class="box">
<img src="../day1-移动端的学习/images/tyre1.png" alt="">
</div>
</body>
</html>
3.单标签是不支持伪元素，例如：img元素，input元素
4. opacity透明度，0是透明的，1是不透明
缩放
是什么?
相对于元素改变大小
有什么用？
改变元素大小，实现页面更酷炫效果
怎么用？
使用scale属性
<title>设置缩放的案例</title>
<style>
.box {
width: 320px;
height: 230px;
border: 1px solid #000;
margin: 100px auto;
/* overflow: hidden：溢出部分隐藏 */
overflow: hidden;
box-shadow: 1px 1px 5px 5px skyblue;
/* cursor: pointer：光标手指效果 */
cursor: pointer;
}
img {
width: 100%;
height: 100%;
/* transition: 过渡设置； all可以省略 */
transition: all 5s;
}
img:hover {
transform: scale(2);
}
</style>
</head>
<body>
<div class="box">
<img src="./images/product.jpg" alt=""></div>
</body>
渐变
是什么?
多个颜色逐渐变化的效果
有什么用？
设置多个颜色逐渐变化，实现页面更酷炫效果
怎么用？
使用 background-image: linear-gradient属性
<title>渐变</title>
<style>
.box {
width: 500px;
height: 500px;
border: 1px solid #000;
border-radius: 50%;
margin: 50px auto;
/* 多个颜色渐变
background-image: linear-gradient(yellowgreen, skyblue,pink); */
/* 多种颜色分层
background-image: linear-gradient(yellowgreen 30%,skyblue 50% ,pink 80%, pink -100%); */
/*设置渐变颜色方向
background-image: linear-gradient(to left,yellowgreen, skyblue,pink ); */
/* 设置渐变颜色角度 */
background-image: linear-gradient(336deg,yellowgreen, skyblue,pink);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
拓展
- 设置 多种渐变色
- 设置 多种渐变色 分层
- 设置 渐变颜色方向：a.使用方位名词；b.100deg
4..渐变没有过渡效果
5.display：none没有过渡效果
6.背景图片没有过渡效果
7.背景图片 渐变效果不是很完善，工作中慎用（浏览器的支持不够好）
如果真的就想要实现 鼠标移入 图片切换的渐变的过程！！
a 换另外的思路来实现这个功能！！
div 里面包装两个图片标签
b. 先让一个图片隐藏 一个图片显示
c. div hover 再让另外一个图片隐藏 另外一个图片显示！
d. 定位加透明度来实现 透明度有过渡
<title>渐变-过渡.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 400px;
height: 400px;
margin: 100px auto;
position: relative;
/* 默认的方向 上下到下 */
/* background-image: linear-gradient(black, red); */
/* transition: 1s; */
/* background-image: url(./images/pic1.png); */
}
div:hover {
/* 渐变颜色 上下 red black */
/* background-image: linear-gradient(red, black); */
/* background-image: url(./images/pic2.png); */
}
div:hover .i1 {
opacity: 0;
}
div:hover .i2 {
opacity: 1;
}
div img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.i1 {
transition: 1s;
}
.i2 {
/* display: none; */
transition: 1s;
opacity: 0;
}
</style>
</head>
<body>
<div>
<img class="i1" src="./images/pic1.png" alt="" />
<img class="i2" src="./images/pic2.png" alt="" />
</div>
</body>
</html>
知识拓展
1.透明色：transparent
2.黑色带一点透明：background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.4))
优化 特性 建议优先使用 平面变换
3. 疑问
a. 既然能用bottom实现这个效果，为啥还要用translate来写呢，这不是多了一行代码了嘛 ?
答：1.工作开发中， 一两行 代码 没有什么影响
translate 相比较于 bottotm 带来性能优化 高得高多
translate css3 提出 新的技术 浏览器看到 translate 特效的时候 浏览器内部 专门开启 一个 做特效的任务工作流程做优化
