day20-CSS-2D转换模块
2017-06-02 本文已影响12人
喵鸢
2D转换模块
- 旋转transform:rotate(45deg)--代表旋转45°
- 平移transform:translate(100px,0px)--代表水平方向，垂直方向如何移动
- 缩放transform:scale(1,1.5)--x)--代表水平方向，垂直方向如何缩放
- 1️⃣取值1，代表不变
- 2️⃣取值大于1，代表放大
- 3️⃣取值小于1，代表缩小
- 4️⃣若水平和垂直方向缩放值都一样，可以简写一个数就可以了
- 综合transform:rotate(45deg) translate(100px,0)
- 1️⃣多种2D以空格隔开
- 2️⃣2D转换模块会修改元素坐标系，若旋转后再平移，则不是水平方向平移了
2D转换模块--形变中心点
- 默认情况下，元素以自身中心点旋转，要想更改中心点可以更改transform-origin：水平方向 垂直方向
- 取值
- 1️⃣像素
- 2️⃣百分比
- 3️⃣特殊关键字：left top right center bottom
- 取值
- 除了对旋转，对平移缩放等也有影响，用得较少
2D转换模块--旋转轴向
- XYZ轴，默认情况是围绕Z轴旋转
- rotateZ(45deg)
透视属性
- 产生近大远小的效果
- perspective：取值（像素：距离物体的距离；越小代表越近效果就越明显）
- 注意点：
- 透视属性一定要添加到呈现近大远小效果的元素的父元素上！
照片墙
- 1.ul li水平垂直居中
- 2.每个li中的img旋转
- 3.hover时增大z-index并还原旋转、放大照片
- 定位：li中的img为相对定位
- 可添加过渡效果
- 边框阴影
盒子阴影和文字阴影
- 1.盒子阴影
- box-shadow：水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影；
- 简写box-shadow：水平偏移 垂直偏移 阴影颜色
- 注意点
- 1️⃣盒子分为内外阴影，默认是外阴影，在盒子外部
- 2️⃣简写时，若不写颜色，阴影颜色默认就是盒子内容的颜色
- 2.文字阴影
- text-shadow：水平偏移 垂直偏移 模糊度 阴影颜色
- 注意：
- 1️⃣简写text-shadow：水平偏移 垂直偏移 模糊度
- 2️⃣阴影颜色默认与文字颜色相同
练习--翻转菜单
- 1.ul li中嵌套ul li
- 2.一级菜单hover的时弹出二级菜单
- hover前旋转180，并且透明度为0
- hover时再旋转180，透明度为1
- 3.ul li的优先级
- hover时优先级应该大于后面的元素
- 可以给ul li添加定位流--子绝父相
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>翻转菜单</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
text-align: center;
}
.fisrt-list{
width: 680px;
height: 50px;
background-color: cornflowerblue;
margin: 0 auto;
margin-top: 100px;
}
.fisrt-list li {
width: 200px;
/*这里不能省略,否则内容会撑起二级菜单的高度*/
height: 50px;
line-height: 50px;
float: left;
background-color: pink;
margin-left: 20px;
position: relative;
}
.second-list{
margin-left: -20px;
/*不能设置在二级菜单的li上,增大z-index需定位流设置在其父元素身上*/
position: absolute;
}
.second-list li{
transform: rotateY(180deg);
background-color: lemonchiffon;
left: 0;
top: 0;
transition: all 1s;
/*透明度可以让二级菜单看不见,而不是不存在*/
opacity: 0;
/*不能设置display这样transform会失效*/
/*display: none;*/
}
.fisrt-list li:hover .second-list li{
/*display: inline-block;*/
opacity: 1;
transform: none;
}
.fisrt-list li:hover .second-list li:nth-child(1){
transition-delay: 0ms;
}
.fisrt-list li:hover .second-list li:nth-child(2){
transition-delay: 200ms;
}
.fisrt-list li:hover .second-list li:nth-child(3){
transition-delay: 400ms;
}
.fisrt-list li:hover .second-list li:nth-child(4){
transition-delay: 600ms;
}
.fisrt-list li:hover .second-list li:nth-child(5){
transition-delay: 800ms;
}
.second-list li:nth-child(1){
transition-delay: 800ms;
}
.second-list li:nth-child(2){
transition-delay: 600ms;
}
.second-list li:nth-child(3){
transition-delay: 400ms;
}
.second-list li:nth-child(4){
transition-delay: 200ms;
}
.second-list li:nth-child(5){
transition-delay: 0ms;
}
div{
width: 680px;
height: 300px;
background-color: red;
margin: 0 auto;
}
</style>
</head>
<body>
<ul class="fisrt-list">
<li>一级菜单
<ul class="second-list">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>一级菜单
<ul class="second-list">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul></li>
<li>一级菜单
<ul class="second-list">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul></li>
</ul>
<div>我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
</body>
</html>
