transform-origin;
旋转参照的旋转点，0 0是左上角，可以使用left center等属性来设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
background: hotpink;
}
.pkBox {
width: 150px;
height: 200px;
margin: 250px auto;
border: 1px solid #000;
position: relative;
}
.pkBox>img {
position: absolute;
width: 100%;
height: 100%;
}
/* 鼠标悬停 旋转 */
.pkBox:hover>img:nth-child(1) {
transform: rotate(60deg);
}
.pkBox:hover>img:nth-child(2) {
transform: rotate(120deg);
}
.pkBox:hover>img:nth-child(3) {
transform: rotate(180deg);
}
.pkBox:hover>img:nth-child(4) {
transform: rotate(240deg);
}
.pkBox:hover>img:nth-child(5) {
transform: rotate(300deg);
}
.pkBox:hover>img:nth-child(6) {
transform: rotate(360deg);
}
.pkBox >img{
transition: all 1s;
/* 变换中心点 */
transform-origin: right top;
}
/* 旋转大盒子 */
.pkBox{
transition: all 1s 1s;
/* 变换的中心点 也能够使用 具体的 坐标来设置 */
/*transform-origin: right top;*/
/* 坐标的原点 是自己的 左上角
x →
y ↓
*/
transform-origin: 0 0 ;
}
.pkBox:hover{
transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="pkBox">
<!--img[src=img/pk1.png]*6-->
</div>
</body>
</html>
3d变换
在rotate，translate等属性加上z轴。
如果效果不明显，可以为元素添加一个perspective属性，表示距离屏幕的距离，越小距离屏幕越近。
transform-style:preserve-3d;浏览器默认没有开启3d运动渲染效果，需要设置这个属性(设置3d运动渲染效果后能设置透明度，不然会没有过度效果)
跑马灯效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
background-color: skyblue;
/* 出现了 形式问题 提一级 到父元素中 */
perspective: 1000px;
}
.dogBox {
width: 249px;
height: 251px;
background: url('img/dog2.jpg') no-repeat center/cover;
position: relative;
margin: 150px auto;
/* 直接 设置距离 */
/*perspective: 1000px;*/
}
.dogBox>.dog {
position: absolute;
width: 100%;
height: 100%;
background: url('img/dog.gif')no-repeat center/cover;
}
.dog:nth-child(1) {
transform: rotateY(0deg) translateZ(400px);
}
.dog:nth-child(2) {
transform: rotateY(60deg) translateZ(400px);
}
.dog:nth-child(3) {
transform: rotateY(120deg) translateZ(400px);
}
.dog:nth-child(4) {
transform: rotateY(180deg) translateZ(400px);
}
.dog:nth-child(5) {
transform: rotateY(240deg) translateZ(400px);
}
.dog:nth-child(6) {
transform: rotateY(300deg) translateZ(400px);
}
/* 鼠标悬停 旋转 */
.dogBox:hover{
transform: rotateY(360deg) ;
transition: all 3s linear;
}
/* 浏览器 默认 不会 渲染 3d变换的 元素
只会 显示 一个 基础的 3d效果而已
如果希望浏览器 能够显示 运动的 3d元素
需要在 父元素 中 设置一个 属性
*/
.dogBox{
transform-style: preserve-3d;
}
/* perspective 属性 设置位置的问题
perspective 设置之后 子元素 显示的效果 是 相对于 设置了 perspective 的元素
如果 无法理解 相对 关系
可以直接记结果
出现 显示 问题 将 perspective提一级即可
*/
</style>
</head>
<body>
<div class="dogBox">
<div class="dog"></div>
<div class="dog"></div>
<div class="dog"></div>
<div class="dog"></div>
<div class="dog"></div>
<div class="dog"></div>
</div>
</body>
</html>
动画的基本使用
两种写法
@keyframes name{ from{} to{ } }@keyframes name{ n%{} m%{} 100%{} }
animation
-
animation:name duration delay timing-function iteration-count fill-mode
属性值可以连写，但要注意持续时间要写在延迟时间前面<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 100px; height: 100px; background: hotpink; margin: 100px auto; /* 过渡属性 状态1 -> 状态2 能够 被动画的方式看到 */ } /* 动画使用 */ /* 步骤1 定义一个动画*/ @keyframes autoMove { /* 从 xxx 如果我们希望是从元素 的默认状态 作为起始点 form 可以省略不写 */ from {} /* 到 xxx */ to { width: 200px; height: 300px; background: yellowgreen; ; } } .autoMove { /* 设置动画 */ /*animation: */ /* 动画的名字 */ animation-name: autoMove; /* 动画持续时间 */ animation-duration: 1s; /* 动画播放了 一次 可以指定 具体的次数 也能够设置 无穷 */ /*animation-iteration-count: 3;*/ /*animation-iteration-count: infinite;*/ /* 动画播放完毕之后 还原为默认的状态 */ /*animation-fill-mode: forwards;*/ /* 动画延迟一会播放 */ animation-delay: 2s; /* 动画的 线型 取值 跟 过渡的 该属性 是一样的 */ animation-timing-function: linear; /* 复合写法 一般 设置 时间 延迟时间 动画的名字 动画停止之后 停留的状态 先出现的时间 是持续时间 后出现的时间 是延迟时间 */ animation: autoMove 1s 1s linear forwards; } </style> </head> <body> <div class='autoMove'></div> </body> </html>- 动画库的基本使用：
animate.css
找动画名字
添加名字的 class
animated
全部都在 animate.css 的最顶部
剥离动画
复制粘贴## 伸缩布局、弹性布局
display:flex;
有主轴和复轴，默认是x为正轴，y为复轴
justify-content：(flex-start,flex-end,space-around,space-between,center)
align-items：(flex-start,flex-end,center)
单独设置属性
align-self：(flex-start,flex-end,center)
改变主轴方向
flex-drection:column(y轴) （row（横向））
设置比例
父元素要设置display:flex;
子元素设置flex:n;
每一分的尺寸等于总宽度/n*子元素个数，设置flex之后，主轴方向的尺寸就无效了，再加属性也无效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul {
width: 500px;
height: 200px;
border: 1px solid #000;
margin: 100px auto;
list-style: none;
padding: 0;
/* 如果要使用弹性布局 找到 父元素
子元素 就会应用 我们的 弹性布局
*/
display: flex;
/* 调整 元素 在 主轴方向上的 排布
flex-start 默认值
flex-end 主轴的 末尾
space-around 平均排布
space-between 平均排布 两边 会顶格
center 内容居中
*/
justify-content: center;
/* 一次性 设置 所有元素 在 副轴的 排布
副轴
center 居中
flex-start 默认的起始位置
flex-end 结束位置
*/
align-items: center;
}
li {
width: 50px;
height: 50px;
margin: 10px;
background: hotpink;
}
/* 单独 设置 某一个元素 在 副轴防线的排布 */
li:nth-child(3) {
/* 单独设置 副轴的排布 */
align-self: flex-end;
}
li:nth-child(4) {
/* 单独设置 副轴的排布 */
align-self: flex-start;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
�
