<!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属性 元素整体透明度
