一. 2D轉(zhuǎn)換模塊
2D轉(zhuǎn)換模塊
/*其中deg是單位, 代表多少度*/
transform: rotate(45deg);
/*
第一個(gè)參數(shù):水平方向
第二個(gè)參數(shù):垂直方向
*/
transform: translate(100px, 0px);
/*
第一個(gè)參數(shù):水平方向
第二個(gè)參數(shù):垂直方向
注意點(diǎn):
如果取值是1, 代表不變
如果取值大于1, 代表需要放大
如果取值小于1, 代表需要縮小
如果水平和垂直縮放都一樣, 那么可以簡(jiǎn)寫為一個(gè)參數(shù)
*/
/*transform: scale(0.5, 0.5);*/
transform: scale(1.5);
/*
注意點(diǎn):
1.如果需要進(jìn)行多個(gè)轉(zhuǎn)換, 那么用空格隔開
2.2D的轉(zhuǎn)換模塊會(huì)修改元素的坐標(biāo)系, 所以旋轉(zhuǎn)之后再平移就不是水平平移的
*/
transform: rotate(45deg) translate(100px, 0px);
2D轉(zhuǎn)換模塊
二. 2D轉(zhuǎn)換模塊-形變中心點(diǎn)
默認(rèn)情況下所有的元素都是以自己的中心點(diǎn)作為參考來旋轉(zhuǎn)的, 我們可以通過形變中心點(diǎn)屬性來修改它的參考點(diǎn)
/*
第一個(gè)參數(shù):水平方向
第二個(gè)參數(shù):垂直方向
注意點(diǎn)
取值有三種形式
具體像素
百分比
特殊關(guān)鍵字
*/
/*transform-origin: 200px 0px;*/
/*transform-origin: 50% 50%;*/
/*transform-origin: 0% 0%;*/
/*transform-origin: center center;*/
transform-origin: left top;
形變中心點(diǎn)
三.透視屬性(perspective: 500px;) 和 旋轉(zhuǎn)軸向 (transform: rotateY(45deg);)
1.perspective: 500px;
1.1什么是透視
近大遠(yuǎn)小
1.2.注意點(diǎn)
一定要注意, 透視屬性必須添加到需要呈現(xiàn)近大遠(yuǎn)小效果的元素的父元素上面
2.transform: rotateY(45deg);
想圍繞哪個(gè)軸旋轉(zhuǎn), 那么只需要在rotate后面加上哪個(gè)軸即可;
代碼示例:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>95-2D轉(zhuǎn)換模塊-旋轉(zhuǎn)軸向</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 800px;
height: 500px;
margin: 0 auto;
}
ul li{
list-style: none;
width: 200px;
height: 200px;
margin: 0 auto;
margin-top: 50px;
border: 1px solid #000;
/*
1.什么是透視
近大遠(yuǎn)小
2.注意點(diǎn)
一定要注意, 透視屬性必須添加到需要呈現(xiàn)近大遠(yuǎn)小效果的元素的父元素上面
*/
perspective: 500px;
}
ul li img{
width: 200px;
height: 200px;
/*perspective: 500px;*/
}
ul li:nth-child(1){
/*默認(rèn)情況下所有元素都是圍繞Z軸進(jìn)行旋轉(zhuǎn)*/
transform: rotateZ(45deg);
}
ul li:nth-child(2) img{
transform: rotateX(45deg);
}
ul li:nth-child(3) img{
/*
總結(jié):
想圍繞哪個(gè)軸旋轉(zhuǎn), 那么只需要在rotate后面加上哪個(gè)軸即可
*/
transform: rotateY(45deg);
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
透視屬性 和 旋轉(zhuǎn)軸向
四. 撲克牌練習(xí)
<html lang="en">
<head>
<meta charset="UTF-8">
<title>96-2D轉(zhuǎn)換模塊-練習(xí)</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 310px;
height: 438px;
border: 1px solid #000;
background-color: skyblue;
margin: 100px auto;
perspective: 500px;
}
div img{
transform-origin: center bottom;
transition: transform 1s;
}
div:hover img{
transform: rotateX(80deg);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
撲克牌
五. 照片墻
<html lang="en">
<head>
<meta charset="UTF-8">
<title>97-2D轉(zhuǎn)換模塊-相片墻</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
height: 400px;
border: 1px solid #000;
background-color: skyblue;
margin-top: 100px;
text-align: center;
}
ul li{
list-style: none;
width: 150px;
height: 200px;
background-color: red;
display: inline-block; //轉(zhuǎn)換成行內(nèi)塊級(jí)元素,用于水平排版
margin-top: 100px;
transition: all 1s;
position: relative;
box-shadow: 0 0 10px;
}
ul li:nth-child(1){
transform: rotate(30deg);
}
ul li:nth-child(2){
transform: rotate(-40deg);
}
ul li:nth-child(3){
transform: rotate(10deg);
}
ul li:nth-child(4){
transform: rotate(45deg);
}
ul li img{
width: 150px;
height: 200px;
border: 5px solid #fff;
box-sizing: border-box;
}
ul li:hover{
/*transform: rotate(0deg);*/
/*transform: none;*/
transform: scale(1.5); //之前的旋轉(zhuǎn)被層疊掉, 只執(zhí)行放大
z-index: 998; //顯示在最上面
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
照片墻
六. 盒子陰影和文字陰影
1.如何給盒子添加陰影
box-shadow: 水平偏移 垂直偏移 模糊度 陰影擴(kuò)展 陰影顏色 內(nèi)外陰影;
2.注意點(diǎn)
2.1盒子的陰影分為內(nèi)外陰影, 默認(rèn)情況下就是外陰影
2.2快速添加陰影只需要編寫三個(gè)參數(shù)即可
box-shadow: 水平偏移 垂直偏移 模糊度;
默認(rèn)情況下陰影的顏色和盒子內(nèi)容的顏色一致
.box1{
width: 200px;
height: 200px;
background-color: red;
margin: 100px auto;
text-align: center;
line-height: 200px;
/*box-shadow: 10px 10px 10px 10px skyblue;*/
/*box-shadow: 10px 10px 10px 10px skyblue inset;*/
box-shadow: 10px 10px 10px;
color: yellow;
}
盒子陰影
3.如何給文字添加陰影
text-shadow: 水平偏移 垂直偏移 模糊度 陰影顏色 ;
.box2{
width: 200px;
height: 200px;
margin: 0 auto;
background-color: pink;
text-align: center;
line-height: 200px;
font-size: 40px;
/*text-shadow: 10px 10px 10px black;*/
text-shadow: 10px 10px 10px;
color: purple;
}
文字陰影
七. 翻轉(zhuǎn)菜單
<html lang="en">
<head>
<meta charset="UTF-8">
<title>99-翻轉(zhuǎn)菜單-綜合練習(xí)</title>
<style>
*{
margin: 0;
padding: 0;
}
.nav{
width: 400px;
height: 40px;
margin: 0 auto;
margin-top: 100px;
background-color: black;
}
.nav>li{
list-style: none;
float: left;
width: 120px;
height: 40px;
background-color: green;
margin-left: 10px;
text-align: center;
line-height: 40px;
position: relative;
}
.sub{
/*不顯示元素*/
/*display: none;*/ //隱藏掉
width: 120px;
position: absolute; //由于下面div中的文字會(huì)擋住菜單中的文字,故通過子絕父相來提高他的優(yōu)先級(jí)
left: 0; //設(shè)置定位屬性 一定要設(shè)置left 和top等屬性
top: 40px;
}
.sub li{
list-style: none;
background-color: deeppink;
transform: rotateY(180deg);
transition: all 1s; //添加過渡
/*設(shè)置透明度*/
opacity: 0;
}
/*
.nav>li:hover .sub{
display: block; //如果前面通過display: none;隱藏的話,這個(gè)地方通過設(shè)置 display: block; 顯示出來; 不過例子中通過改變li的透明度實(shí)現(xiàn)的隱藏
}
*/
.nav>li:hover .sub li{
transform: none; //取消形變
opacity: 1;
}
//hover 時(shí)通過延時(shí)依次顯示
.nav>li:hover .sub li:nth-child(1){
transition-delay: 0ms;
}
.nav>li:hover .sub li:nth-child(2){
transition-delay: 200ms;
}
.nav>li:hover .sub li:nth-child(3){
transition-delay: 400ms;
}
.nav>li:hover .sub li:nth-child(4){
transition-delay: 600ms;
}
.nav>li:hover .sub li:nth-child(5){
transition-delay: 800ms;
}
//默認(rèn)狀態(tài)反過來
.nav>li .sub li:nth-child(5){
transition-delay: 0ms;
}
.nav>li .sub li:nth-child(4){
transition-delay: 200ms;
}
.nav>li .sub li:nth-child(3){
transition-delay: 400ms;
}
.nav>li .sub li:nth-child(2){
transition-delay: 600ms;
}
.nav>li .sub li:nth-child(1){
transition-delay: 800ms;
}
div{
width: 400px;
height: 300px;
background-color: red;
margin: 0 auto;
}
</style>
</head>
<body>
<ul class="nav">
<li>一級(jí)菜單
<ul class="sub">
<li>二級(jí)菜單</li>
<li>二級(jí)菜單</li>
<li>二級(jí)菜單</li>
<li>二級(jí)菜單</li>
<li>二級(jí)菜單</li>
</ul>
</li>
<li>一級(jí)菜單
<ul class="sub">
<li>二級(jí)菜單</li>
<li>二級(jí)菜單</li>
<li>二級(jí)菜單</li>
<li>二級(jí)菜單</li>
<li>二級(jí)菜單</li>
</ul>
</li>
<li>一級(jí)菜單
<ul class="sub">
<li>二級(jí)菜單</li>
<li>二級(jí)菜單</li>
<li>二級(jí)菜單</li>
<li>二級(jí)菜單</li>
<li>二級(jí)菜單</li>
</ul>
</li>
</ul>
<div>
我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文
字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是
文字我是文字我是文字我是文字
</div>
</body>
</html>
翻轉(zhuǎn)菜單
