第二天
空间转换
位移
transform:translateZ(100px)
transform:translateX(100px)
transform:translateY(100px)
transform3d(x,y,z);
旋转
rotateX()
rotateY
rotateZ
rotate3d(x,y,z)
立体 坐标 x轴 y 轴 z轴
其他
1.视距 ：perspective 看见元素 近大远小的效果
2.左手准则: 根据左手来判断物体旋转的方向 方便我们 判断代码如何执反推代码行或者根据效果
3.3d立方体 立体呈现 开启3d空间 transform-style:perservice-3d;
视距
近大远小 要给被观察的物体的父元素使用！！
当我们想要看到元素在z轴的上的变化的是时候，需要给被观察的物体的添加1000px
perspective:1000px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
/* 代码写在父元素 */
perspective: 1000px;
}
.box{
width: 200px;
height: 200px;
margin:20px auto;
background-color: pink;
/* 透视效果 */
/* 因为translateZ是不可能越过屏幕的 */
/* 默认情况看不见Z轴 */
transform: translateZ(20px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
空间旋转
z正 顺时针 负逆时针
perspective 1000px
立体呈现
使用transform-style:perserve-3d呈现立体图形
立体空间
transform-style:preserve-3d;
transform:preserve-3d;
body：添加立体空间
呈现立体空间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
input {
width: 50px;
}
.box {
width: 200px;
height: 200px;
position: relative;
margin: 100px auto;
/* 立体呈现 */
transform-style: preserve-3d;
/* 旋转元素中心 */
perspective-origin: 0px 0px;
/* rotate3d(X,Y,Z,旋转) */
transform: rotate3d(1, 1, 1, 30deg);
}
.box > div {
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
opacity: 0.9;
font-size: 30px;
}
::input-selection {
background-color: #000;
color: #fff;
}
.front {
background-color: #ff1703;
}
.back {
background-color: #ffc629;
}
.left {
background-color: #53ff27;
}
.right {
background-color: #18ffe4;
}
.top {
background-color: #0c00ff;
}
.bottom {
background-color: #ff21cb;
}
/*将第一个div前移*/
.front {
transform: translateZ(100px);
}
/*第二个div后移*/
.back {
transform: translateZ(-100px) rotateY(180deg);
/*旋转会影响当前元素所在的坐标系：强烈建议：先移动再旋转*/
/*transform: rotateY(180deg) translateZ(100px);*/
}
.left {
transform: translateX(-100px) rotateY(-90deg);
}
.right {
transform: translateX(100px) rotateY(90deg);
}
.top {
transform: translateY(-100px) rotateX(90deg);
}
.bottom {
transform: translateY(100px) rotateX(-90deg);
}
body {
perspective: 1000px;
}
</style>
</head>
<body>
<div class="box">
<div class="front">前面</div>
<div class="back">后面</div>
<div class="left">左边</div>
<div class="right">右边</div>
<div class="top">上面</div>
<div class="bottom">下面</div>
</div>
</body>
</html>
rotate3D(X,Y,Z,deg);
空间位移
目标：使用translate实现元素空间位移效果
-
transform:translate3d(x,y,z);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
/* 代码写在父元素 */
perspective: 1000px;
}
.box{
width: 200px;
height: 200px;
margin:20px auto;
background-color: pink;
/* 透视效果 */
/* 因为translateZ是不可能越过屏幕的 */
/* 默认情况看不见Z轴 */
/* transform: translateZ(20px); */
/* 使用xyz显示 */
transform: translateX(100px) translateY(100px) translateZ(100px);
transform:translate3d(100px,100px,100px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
使用rotate实现元素空间旋转效果
- 语法：transform:rotateZ(值) transform:rotateX(值);
- 左手法则
- 判断旋转方向：左手握住旋转轴，拇指指向正值，手指弯曲指向物体旋转方向。
- transform:rotateZ(0deg);
- transform-style:flat;默认值
- 使用transform-style:preserve-3d; 可以设置立体空间的容器
总结：做一个立体图形的时候，需要给容器，设置一个 开启立体空间属性
给box 开启立体空间效果
华为综合案例
a标签的盒子没有定宽度和高度
默认高度是由 图片 撑开的！！
所以当图片变大的时候 a标签页变大 导致 查看更多 标签 也重新出现了！
解决方法
设置a标签的高度 即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./iconfont/iconfont.css">
<title>华为综合案例v1</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
a{
position: relative;
text-decoration: none;
float: left;
/* 元素转换块级元素 */
display: block;
width: 350px;
height: 247px;
margin:20px ;
color:#fff;
/* 溢出隐藏 */
overflow: hidden;
/* background-image: linear-gradient(t,); */
/* background-color: pink; */
}
a::before{
content:'';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
/* 优先级z-index */
z-index: 1;
/* 黑色的透明遮罩 */
background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.4));
opacity: 0;
/* 1s */
transition: 1s;
}
.box{
position: absolute;
left:0;
bottom:-15px;
margin:20px;
z-index: 2;
}
a img{
transition: all 1s;
}
a:hover img{
transform: scale(1.3);
}
/* .box p{
margin-top: 30px;
} */
a:hover .box{
bottom: 0;
}
a:hover::before{
opacity: 1;
}
</style>
</head>
<body>
<a href="#">
<img src="./images/pic1.png" alt="">
<div class="box">
<h5>《ICT新视界》刊首语</h5>
<h4>笃行致远，共建具有获得感、幸福感、安全感的智慧城市</h4>
<p>了解更多</p>
</div>
</a>
<a href="#">
<img src="./images/pic1.png" alt="">
<div class="box">
<h5>《ICT新视界》刊首语</h5>
<h4>笃行致远，共建具有获得感、幸福感、安全感的智慧城市</h4>
<p>了解更多</p>
</div>
</a>
<a href="#">
<img src="./images/pic1.png" alt="">
<div class="box">
<h5>《ICT新视界》刊首语</h5>
<h4>笃行致远，共建具有获得感、幸福感、安全感的智慧城市</h4>
<p>了解更多</p>
</div>
</a>
</body>
</html>
遮罩效果
a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
/* background-image: linear-gradient(透明色, black); */
/* 黑色带一点透明 */
background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.4));
opacity: 0;
transition: 1s;
/* opacity: 0.3; */
}
a标签现在f已经是当成一个容器来使用了 转块级！！
盒子 连同背景和内容都变得透明而文字不会透明
background-color:rgba(0，0，0，0.4);
display:none 没有过渡效果
渐变没有过渡效果
背景图片 过渡效果完美
透明色 背景颜色透明 字体不会透明
2优化
做特效的尽可能变换transform来实现
案例步骤 1.先分析主要结构 大结构 html结构
2.再写静态效果 CSS
3.再去考虑hover 过渡 动态效果
动画
使用amimation添加动画 帧或动画帧
实现步骤
1定义动画
/**两个状态变换***/
@keyframes 动画名称{
from{}
top{}
}
------------多个状态变化-
@keyframes 动画名称{
0%{}
10%{}
15%{}
100%{}
}
2.使用动画
animation:动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕状态;
两个值 动画名称 动画时长
动画属性
使用steps实现逐帧动画
animation-timing-function:steps(N);
精灵动画制作步骤
准备显示区域
设置盒子尺寸是一张小图的尺寸 ，背景图为当前精灵图
定义动画
改变背景图的位置（移动的距离是精灵图的宽度）
使用动画
steps(N)
添加无限重复
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 270px;
height: 130px;
background-color: red;
background: url("./baidu.png") ;
animation: move 2s steps(64) infinite ;
}
@keyframes move{
from{
background-position: 0 0 ;
}
to{
background-position: -17280px 0;
}
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
使用animatio实现逐帧图片位移效果
animation-play-state: paused：规格动画是在运行或者暂停
animation: move 10s linear infinite: 匀速循环动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box{
width: 600px;
/* height: 200px; */
border:5px solid black;
margin: 100px auto;
overflow: hidden;
}
.box ul{
width: 2000px;
/* height: 200px; */
background-color: red;
list-style: none;
animation: move 10s linear infinite;
}
.box ul li{
float: left;
}
.box ul li img{
width: 200px;
/* 图片居中 */
vertical-align: middle;
}
@keyframes move {
to{
transform: translateX(-1400px);
}
}
ul:hover{
/* 停止 */
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img src="./1.jpg" alt=""></li>
<li><img src="./2.jpg" alt=""></li>
<li><img src="./3.jpg" alt=""></li>
<li><img src="./4.jpg" alt=""></li>
<li><img src="./5.jpg" alt=""></li>
<li><img src="./6.jpg" alt=""></li>
<li><img src="./7.jpg" alt=""></li>
<li><img src="./1.jpg" alt=""></li>
<li><img src="./2.jpg" alt=""></li>
<li><img src="./3.jpg" alt=""></li>
</ul>
</div>
</body>
</html>
