<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2D轉換模塊</title>
<style media="screen">
*{
margin: 0;
padding: 0;
}
/*ul{
width: 800px;
height: 500px;
border: 2px solid;
margin: 100px auto;
list-style: none;
}
ul li {
width: 100px;
height: 50px;
background-color: red;
margin: 0 auto;
margin-top: 40px;
line-height: 50px;
text-align: center;
}
ul li:nth-child(2){
transform: rotate(45deg);
}
ul li:nth-child(3){
transform: translate(100px, 10px);
}
ul li:nth-child(4){
transform: scale(1.5, 0.8);
}
ul li:nth-child(5){
transform: rotate(45deg) translate(100px, 10px) scale(1.5, 0.8);
}*/
/*ul{
width: 200px;
height: 200px;
border: 1px solid;
margin: 100px auto;
list-style: none;
position: relative;
}
ul li {
width: 200px;
height: 200px;
position: absolute;
transform-origin:100px 0px;
transform-origin: 50% 0%;
transform-origin: center left;
}
ul li:nth-child(1){
background-color: red;
transform: rotate(30deg);
}
ul li:nth-child(2){
background-color: green;
transform: rotate(50deg);
}
ul li:nth-child(3){
background-color: blue;
transform: rotate(70deg) scale(0.5);
}*/
/*ul{
width: 250px;
height: 500px;
margin: 100px auto;
list-style: none;
border: 1px solid;
}
ul li {
width: 200px;
height: 120px;
border: 1px solid;
margin: 0 auto;
margin-top: 30px;
perspective: 500px;
}
ul li img{
width: 200px;
height: 120px;
}
ul li:nth-child(1) img{
transform: rotateZ(30deg);
}
ul li:nth-child(2) img{
transform: rotateX(45deg);
}
ul li:nth-child(3) img{
transform: rotateY(30deg);
}*/
/*div{
width: 200px;
height: 113px;
border: 1px solid;
background-color: skyblue;
margin: 100px auto;
perspective: 100px;
}
div img{
transform-origin: center bottom;
transition: transform 1s;
}
div:hover img{
transform: rotateX(80deg);
}*/
/*ul{
height: 400px;
border: 1px solid;
background-color: skyblue;
margin: 100px auto;
text-align: center;
}
ul li{
width: 200px;
height: 113px;
display: inline-block;
margin-top: 110px;
transition: transform 1s;
position: relative;
box-shadow: 0 0 10px;
}
ul li img{
border: 2px solid white;
box-sizing: border-box;
}
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:hover{
transform: rotate(0deg);
transform: none;
transform: scale(1.5);
z-index: 99;
}*/
/*.box1{
width: 200px;
height: 200px;
margin:100px auto;
background-color: red;
text-align: center;
line-height: 200px;
box-shadow: 10px 10px 10px 0px black inset;
box-shadow: 10px 10px 10px 5px ;
color: blue;
}
.box2{
width: 200px;
height: 200px;
margin:100px auto;
background-color: green;
text-align: center;
line-height: 200px;
font-size: 30px;
text-shadow: 10px 10px 10px black;
text-shadow: 10px 10px 10px;
color: pink;
}*/
.nav{
width: 400px;
height: 40px;
margin: 0 auto;
margin-top: 100px;
background-color: black;
}
.nav>li {
list-style: none;
width: 120px;
height: 40px;
background-color: green;
float: left;
margin-left: 10px;
text-align: center;
line-height: 40px;
/*color: white;*/
position: relative;
}
.sub{
width: 120px;
position: absolute;
top: 40px;
left: 0;
}
.sub li {
list-style: none;
background-color: deeppink;
transform: rotateY(180deg);
transition: all 1s;
/*透明度為0，全透明*/
opacity: 0;
}
.nav>li:hover .sub li {
transform: none;
/*透明度為1，不透明*/
opacity: 1;
}
.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;
}
.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>
<li>正常</li>
<li>旋轉</li>
<li>平移</li>
<li>縮放</li>
<li>綜合</li>
</ul> -->
<!-- <ul>
<li></li>
<li></li>
<li></li>
</ul> -->
<!-- <ul>
<li><img src="../image/o.gif" alt=""></li>
<li><img src="../image/o.gif" alt=""></li>
<li><img src="../image/o.gif" alt=""></li>
</ul> -->
<!-- <div class="">
<img src="../image/o.gif" alt="">
</div> -->
<!-- <ul>
<li><img src="../image/o.gif" alt=""></li>
<li><img src="../image/o.gif" alt=""></li>
<li><img src="../image/o.gif" alt=""></li>
<li><img src="../image/o.gif" alt=""></li>
</ul> -->
<!-- <div class="box1">
I am box1.
</div>
<div class="box2">
I am box2.
</div> -->
<ul class="nav">
<li>一級菜單
<ul class="sub">
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
</ul>
</li>
<li>一級菜單
<ul class="sub">
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
</ul>
</li>
<li>一級菜單
<ul class="sub">
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
</ul>
</li>
</ul>
<div class="">
我是Div 我是Div 我是Div 我是Div 我是Div 我是Div 我是Div
</div>
</body>
</html>
第166課 2D轉換模塊
旋轉
transform:rotate(45deg)
deg是單位，代表多少度
平移
transform:translate(100px,0px);
第一個參數：水平方向
第二個參數：垂直方向
縮放
transform:scale(1.5,1.2);
transform:scale(1.5);
第一個參數：水平方向
第二個參數：垂直方向
注意點：
如果取值是1，代表不變
如果取值大于1，代表需要放大
如果取值小于1，代表需要縮小
如果水平和垂直縮放一樣，那么可以簡寫為一個參數
綜合 注意點
1、如果需要進行多個轉換，那么用空格隔開
trasnform: rotate(45deg) translate(100px,10px) scale(1.5,1.5);
2、2D的轉換模塊會修改元素的坐標系，所以旋轉之后再平移就不是水平平移的
第167課 2D轉換模塊-形變中心點
默認情況下所有的元素都是以自己的中心作為參考來旋轉的，
我們可以通過形變中心點屬性來修改它的參考點
transform-origin:200px 0px;
第一個參數：水平方向
第二個參數：垂直方向
注意點
取值有三種形式
具體的像素 transform-origin:200px 0px;
百分百 transform-origin:100% 0%；
特殊關鍵字 transform-origin:left top;
對于縮放和傾斜有影響，但是這兩種企業開發用的較少
第170課 2D轉換模塊-旋轉軸向
1、默認情況下所有元素都是圍繞Z軸進行旋轉
2、想圍繞哪個軸旋轉，那么只需要在rotate后面加上哪個軸即可 rotateX rotateY rotateZ
第169課 2D轉換模塊-透視屬性
透視：近大遠小
值：距離物體的遠，越大越遠，效果越不明顯；越小越近，效果越明顯
perspective:500px;
注意點：
一定注意，透視屬性必須添加到需要呈現近大遠小效果的元素的父元素上面
第170課 2D轉換模塊-相片墻
練習
第171課 盒子陰影和文字陰影
盒子陰影
box-shadow:水平偏移 垂直偏移 模糊度 陰影擴展 陰影顏色 內外陰影
注意點：
1、盒子的陰影分為內外陰影，默認情況下就是外陰影
2、快速添加陰影只需要編寫三個參數即可
box-shadow:水平偏移 垂直偏移 模糊度;
3、默認情況下陰影的顏色和盒子內容的顏色一致
文字陰影
text-shadow:水平偏移 垂直偏移 模糊度 陰影顏色;
注意點
1、快速添加陰影只需要編寫三個參數即可
text-shadow:水平偏移 垂直偏移 模糊度;
2、默認情況下陰影的顏色和盒子內容的顏色一致
第172課 翻轉菜單-綜合練習
1、覆蓋問題通過定位流修改；定位流中的覆蓋問題通過z-index修改
2、margin:100px auto; top和bottom均為100px; 水平居中
3、list-style:none;應該寫在li中
5、transform:none; 可以清除所有的轉換
6、opacity屬性 元素整體透明度
