transform-origin;
旋轉(zhuǎn)參照的旋轉(zhuǎn)點(diǎn)搏讶，0 0是左上角芥备，可以使用left center等屬性來設(shè)置
<!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%;
}
/* 鼠標(biāo)懸停 旋轉(zhuǎn) */
.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;
/* 變換中心點(diǎn) */
transform-origin: right top;
}
/* 旋轉(zhuǎn)大盒子 */
.pkBox{
transition: all 1s 1s;
/* 變換的中心點(diǎn) 也能夠使用 具體的 坐標(biāo)來設(shè)置 */
/*transform-origin: right top;*/
/* 坐標(biāo)的原點(diǎn) 是自己的 左上角
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;瀏覽器默認(rèn)沒有開啟3d運(yùn)動渲染效果煤搜，需要設(shè)置這個屬性(設(shè)置3d運(yùn)動渲染效果后能設(shè)置透明度免绿，不然會沒有過度效果)
跑馬燈效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
background-color: skyblue;
/* 出現(xiàn)了 形式問題 提一級 到父元素中 */
perspective: 1000px;
}
.dogBox {
width: 249px;
height: 251px;
background: url('img/dog2.jpg') no-repeat center/cover;
position: relative;
margin: 150px auto;
/* 直接 設(shè)置距離 */
/*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);
}
/* 鼠標(biāo)懸停 旋轉(zhuǎn) */
.dogBox:hover{
transform: rotateY(360deg) ;
transition: all 3s linear;
}
/* 瀏覽器 默認(rèn) 不會 渲染 3d變換的 元素
只會 顯示 一個 基礎(chǔ)的 3d效果而已
如果希望瀏覽器 能夠顯示 運(yùn)動的 3d元素
需要在 父元素 中 設(shè)置一個 屬性
*/
.dogBox{
transform-style: preserve-3d;
}
/* perspective 屬性 設(shè)置位置的問題
perspective 設(shè)置之后 子元素 顯示的效果 是 相對于 設(shè)置了 perspective 的元素
如果 無法理解 相對 關(guān)系
可以直接記結(jié)果
出現(xiàn) 顯示 問題 將 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
屬性值可以連寫，但要注意持續(xù)時間要寫在延遲時間前面<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 100px; height: 100px; background: hotpink; margin: 100px auto; /* 過渡屬性 狀態(tài)1 -> 狀態(tài)2 能夠 被動畫的方式看到 */ } /* 動畫使用 */ /* 步驟1 定義一個動畫*/ @keyframes autoMove { /* 從 xxx 如果我們希望是從元素 的默認(rèn)狀態(tài) 作為起始點(diǎn) form 可以省略不寫 */ from {} /* 到 xxx */ to { width: 200px; height: 300px; background: yellowgreen; ; } } .autoMove { /* 設(shè)置動畫 */ /*animation: */ /* 動畫的名字 */ animation-name: autoMove; /* 動畫持續(xù)時間 */ animation-duration: 1s; /* 動畫播放了 一次 可以指定 具體的次數(shù) 也能夠設(shè)置 無窮 */ /*animation-iteration-count: 3;*/ /*animation-iteration-count: infinite;*/ /* 動畫播放完畢之后 還原為默認(rèn)的狀態(tài) */ /*animation-fill-mode: forwards;*/ /* 動畫延遲一會播放 */ animation-delay: 2s; /* 動畫的 線型 取值 跟 過渡的 該屬性 是一樣的 */ animation-timing-function: linear; /* 復(fù)合寫法 一般 設(shè)置 時間 延遲時間 動畫的名字 動畫停止之后 停留的狀態(tài) 先出現(xiàn)的時間 是持續(xù)時間 后出現(xiàn)的時間 是延遲時間 */ animation: autoMove 1s 1s linear forwards; } </style> </head> <body> <div class='autoMove'></div> </body> </html>- 動畫庫的基本使用：
animate.css
找動畫名字
添加名字的 class
animated
全部都在 animate.css 的最頂部
剝離動畫
復(fù)制粘貼## 伸縮布局擦盾、彈性布局
display:flex;
有主軸和復(fù)軸嘲驾，默認(rèn)是x為正軸，y為復(fù)軸
justify-content：(flex-start,flex-end,space-around,space-between,center)
align-items：(flex-start,flex-end,center)
單獨(dú)設(shè)置屬性
align-self：(flex-start,flex-end,center)
改變主軸方向
flex-drection:column(y軸) （row（橫向））
設(shè)置比例
父元素要設(shè)置display:flex;
子元素設(shè)置flex:n;
每一分的尺寸等于總寬度/n*子元素個數(shù)迹卢，設(shè)置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;
/* 如果要使用彈性布局 找到 父元素
子元素 就會應(yīng)用 我們的 彈性布局
*/
display: flex;
/* 調(diào)整 元素 在 主軸方向上的 排布
flex-start 默認(rèn)值
flex-end 主軸的 末尾
space-around 平均排布
space-between 平均排布 兩邊 會頂格
center 內(nèi)容居中
*/
justify-content: center;
/* 一次性 設(shè)置 所有元素 在 副軸的 排布
副軸
center 居中
flex-start 默認(rèn)的起始位置
flex-end 結(jié)束位置
*/
align-items: center;
}
li {
width: 50px;
height: 50px;
margin: 10px;
background: hotpink;
}
/* 單獨(dú) 設(shè)置 某一個元素 在 副軸防線的排布 */
li:nth-child(3) {
/* 單獨(dú)設(shè)置 副軸的排布 */
align-self: flex-end;
}
li:nth-child(4) {
/* 單獨(dú)設(shè)置 副軸的排布 */
align-self: flex-start;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
?
