目录
1. 2D转换
1.1二维坐标系
1.2 2D转换之translate
div {
width: 200px;
height: 100px;
background-color: pink;
/* 我们translate里面的参数可以用% */
/* 如果里面的参数是 % 移动的距离是 盒子自身的宽度或者高度来对比的 */
/* 这里的 50% 就是 100px 因为盒子的宽度为200px */
transform: translateX(50%);
}1.3 2D转换之旋转 rotate
===案例：三角形===
代码展示：
<style>
div {
position: relative;
width: 249px;
height: 35px;
border: 2px solid black;
}
div::after {
content: '';
position: absolute;
top: 7px;
right: 15px;
width: 10px;
height: 10px;
border-right: 1px solid black;
border-bottom: 1px solid black;
transform: rotate(45deg);
transition: all 0.5s;
}
/* 鼠标经过div,三角旋转 */
/* 已经有45度的基础上再转180度=225度 */
div:hover::after {
transform: rotate(225deg);
}
</style>
</head>
<body>
<div></div>
</body>效果：
1.4 2D旋转中心点transform-origin
===案例：旋转案例===
代码
<style>
.box1 {
overflow: hidden;
margin: 100px auto;
width: 50px;
height: 50px;
background-color: rgb(150, 150, 241);
}
.box1::after {
content: '传媒';
display: block;
width: 50px;
height: 50px;
color: #fff;
line-height: 50px;
text-align: center;
background-color: rgb(44, 44, 175);
transform-origin: left bottom;
transform: rotate(180deg);
transition: all .5s;
}
.box1:hover::after {
transform: rotate(0deg);
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>效果
1.5 2D旋转之scale
scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子
===分页按钮案例===
代码展示：
<style>
li {
list-style: none;
}
ul li {
float: left;
margin-left: 20px;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
border: 2px solid greenyellow;
border-radius: 25px;
cursor: pointer;
transition: all .2s;
}
ul li:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>效果图：
1.6 2D转换综合写法
1.7 2D转化小结
2.CSS3动画
2.1动画的的基本使用
1.可以做多个状态的变化 keyframe 关键帧（例如0%，50%，100%）
2.里面的百分比要是整数
3.里面的的百分比就是 总的时间的划分
4.注意制作translate动画时括号里的坐标是绝对坐标不是相对
2.2动画常用属性
其中，animation-direction：alternate 逆播放必须搭配循环播放animation-iteration-count：infinite 使用。
2.3 动画简写属性
===热点图案例===
参考代码：
<style>
.map {
position: relative;
width: 750px;
height: 620px;
background-color: rgb(37, 37, 37);
background-image: url(../jpgs/map.png);
}
.city {
position: absolute;
top: 228px;
right: 195px;
}
.dotted {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #09f;
}
.city div[class^=pulse] {
/* 保证我们小波纹在父盒子里面水平垂直居中 放大之后就会中心向四周发散 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
box-shadow: 0 0 12px #009dfd;
border-radius: 50%;
animation: pulse 1.2s linear infinite;
}
@keyframes pulse {
0% {}
70% {
/* transform:scale(5); 我们不要用scale 因为他会让阴影变大 并且上面出现过translate 用scale会导致缩放中心点偏移 */
width: 40px;
height: 40px;
/* 清晰度 */
opacity: 1;
}
100% {
width: 80px;
height: 80px;
opacity: 0;
}
}
/* 注意权重 上面.city div[class^=pulse]有默认开始样式0s 权重为21 */
.map .city .pulse2 {
animation-delay: 0.4s;
}
/* 也可写成.city div.pulse3 权重为21 层叠掉上面样式 div.pulse3为交集选择器 选择为div同时类名为pulse3的元素 中间无空格 */
.city div.pulse3 {
animation-delay: 0.8s
}
</style>
</head>
<body>
<div class="map">
<div class="city">
<div class="dotted"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
</div>
</body>效果图：
2.4速度曲线之steps步长
案例：
<style>
div {
overflow: hidden;
width: 0;
height: 30px;
/* 让文字在一行内显示 */
white-space: nowrap;
background-color: skyblue;
font-size: 20px;
animation: move 4s steps(10) forwards;
}
@keyframes move {
0% {}
100% {
width: 200px;
}
}
</style>
</head>
<body>
<div>世纪佳缘我在这里等你</div>
</body>效果图：
===奔跑的北极熊案例===
运用图片：
实现效果：
参考代码：
<style>
body {
background-color: #ccc;
}
.bear {
position: absolute;
width: 200px;
height: 100px;
background: url(../jpgs/bear.png) no-repeat;
/* 我们元素可以添加多个动画，用逗号分隔 */
animation: bear .5s steps(8) infinite, move 2s linear forwards;
}
@keyframes bear {
0% {
background-position: 0 0;
}
100% {
/* 把熊精灵图当作div的背景图片 通过 background-position 实现调整背景图片的显示 以此实现奔跑效果 */
background-position: -1600px 0;
}
}
@keyframes move {
0% {
left: 0;
}
100% {
left: 50%;
transform: tranlateX(-50%);
}
}
</style>
</head>
<body>
<div class="bear"></div>
</body>3. 3D转换
3.1三维坐标系
3.2 3D移动 translate3d
3D移动在2D基础上多加了一个可以移动的方向，就是z轴方向
- transform：translateX(100px) :仅仅是在x轴上移动
- transform：translateY(100px) :仅仅是在y轴上移动
- transform：translateZ(100px) :仅仅是在z轴上移动（注意:translateZ一般用px单位）
- transform：translate3d(x,y,z) :其中x、y、z分别指要移动的轴的方向的距离
1.transform: translateX(100px) translateY(100px) translateZ(100px);
等价于
transform: translate3d(100px, 100px, 100px);
2.其中，xyz是不能省略的，如果没有就写0
transform: translate3d(0, 100px, 100px);
3.3透视perspective
透视能让动画更立体，产生3D效果
3.4translateZ
3.5 3D旋转rotate3d
关于3D旋转中的旋转方向：
让轴的箭头指向自己，括号内为正时旋转方向为顺时针，为负则为逆时针。
也可用左手定则，大拇指指向轴线正向，其余手指的弯曲方向就是沿着x轴旋转的方向
了解：
3.6 3D呈现transform-style
案例
参考代码
<style>
body {
perspective: 300px;
}
.box {
position: relative;
margin: 100px auto;
width: 200px;
height: 200px;
}
.box:hover {
transform: rotateY(60deg);
/* 让子元素保持3d立体空间环境 */
transform-style: preserve-3d;
}
.box div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: pink;
}
.box div:last-child {
background-color: skyblue;
transform: rotateX(60deg);
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
</div>
</body>===两面翻转盒子案例===
效果
步骤
参考代码
<style>
.box {
position: relative;
margin: 200px auto;
width: 200px;
height: 200px;
transition: all 1s;
/* 让背面的粉色盒子保留立体空间 */
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(180deg);
}
.back,
.front {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 30px;
color: #fff;
line-height: 200px;
text-align: center;
border-radius: 50%;
}
.back {
/* 提前让背后的盒子旋转180° 让文字转过来的时候是正的 */
transform: rotateY(180deg);
}
.back {
background-color: pink;
}
.front {
z-index: 1;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div class="front">大家好</div>
<div class="back">我是一段文字</div>
</div>
</body>===3D导航栏案例===
参考代码
<style>
* {
margin: 0;
padding: 0;
}
ul {
margin: 100px 100px;
}
ul li {
float: left;
margin: 0 5px;
width: 100px;
height: 50px;
list-style: none;
/* 一会儿我们要给box 旋转 也需要透视 干脆给li加 里面的子盒子都有透视效果 */
perspective: 300px;
}
.box {
position: relative;
width: 100px;
height: 50px;
transform-style: preserve-3d;
transition: all .4s;
}
.box:hover {
transform: rotateX(90deg);
}
.front,
.bottom {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: #fff;
line-height: 50px;
text-align: center;
}
.front {
z-index: 1;
background-color: pink;
/* 给前面的盒子添加z轴移动 保证盒子旋转中心还在原来基线上 */
transform: translateZ(25px);
}
.bottom {
background-color: purple;
/* 给底下的盒子沿着X轴负方向旋转 向前扑到 这样后 box旋转出现的文字才是正的 */
/* 我们如果有移动 必须先写我们的移动 */
transform: translateY(25px) rotateX(-90deg);
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>
<div class="box">
<div class="front">黑马程序员</div>
<div class="bottom">pink老师等你</div>
</div>
</li>
<li>
<div class="box">
<div class="front">黑马程序员</div>
<div class="bottom">pink老师等你</div>
</div>
</li>
<li>
<div class="box">
<div class="front">黑马程序员</div>
<div class="bottom">pink老师等你</div>
</div>
</li>
<li>
<div class="box">
<div class="front">黑马程序员</div>
<div class="bottom">pink老师等你</div>
</div>
</li>
</ul>
</div>
</body>
效果图
4. H5C3综合案例-旋转木马
参考代码
<style>
body {
perspective: 1000px;
}
section {
position: relative;
width: 300px;
height: 200px;
margin: 150px auto;
transform-style: preserve-3d;
/* 添加动画效果 */
animation: rotate 10s linear infinite;
background: url(../jpgs/pig.jpg) no-repeat;
}
section:hover {
/* 鼠标放入section 停止动画 */
animation-play-state: paused;
}
@keyframes rotate {
0% {}
100% {
transform: rotateY(360deg);
}
}
section div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../jpgs/dog.jpg) no-repeat;
}
section div:nth-child(1) {
transform: translateZ(400px);
}
section div:nth-child(2) {
/* 先旋转再位移 坐标轴也跟着旋转 */
transform: rotateY(60deg) translateZ(400px);
}
section div:nth-child(3) {
/* 先旋转再位移 坐标轴也跟着旋转 */
transform: rotateY(120deg) translateZ(400px);
}
section div:nth-child(4) {
/* 先旋转再位移 坐标轴也跟着旋转 */
transform: rotateY(180deg) translateZ(400px);
}
section div:nth-child(5) {
/* 先旋转再位移 坐标轴也跟着旋转 */
transform: rotateY(240deg) translateZ(400px);
}
section div:nth-child(6) {
/* 先旋转再位移 坐标轴也跟着旋转 */
transform: rotateY(300deg) translateZ(400px);
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>效果图
5.浏览器私有前缀
扫一扫
344
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
