css推拉门
3.jpg
bg.png
主要知识点 ：
相对定位、绝对定位：子元素采用绝对定位，父元素要采用相对定位，简称“子绝父相”。
过渡效果：
transition: 要过渡的属性（一般设置为all） 花费时间 运动曲线 何时开始
一般transition只设置前两个属性
其中运动曲线有：
- linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
- ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
- ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
- ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
- ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
- 移动：
- transform:translate(x,y);(translateX(),translateY())
- 单个值x起作用
- transform:translate3d(x,y,z);
- (z越大，看到的越大，想象一下 面向屏幕向里z值越来越小，其中z的值只能是px）
- 缩放：
- transform:scale();//单个值，x,y都起作用
- transform:scaleX();
- transform:scaleY();
- 旋转：
- transform:rotate();//单位是deg
- 补充：
- 旋转中心点：
- transform-origin: ;//可以是top left right bottom 也可以是px
- 倾斜：
- transform:snew(x,y);//单位deg
- x为正值是向左倾斜，y为正值时向上倾斜
- 透视：
- perspective: px;//3d效果，视距越大，效果越不明显 一般设为1000px
以下为详细代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>推拉门</title>
<style>
section{
width: 450px;
height: 300px;
margin:100px auto;
background: url(3.jpg) no-repeat;
position: relative;
perspective:1000px;
}
.left,.right{
position: absolute;
top: 0;
width: 50%;
height: 100%;
background-color: pink;
transition: all 2s;
}
.left {
left: 0;
border-right: 1px solid #CCC;
transform-origin: left;
background:url(bg.png) repeat;
}
.right{
right: 0;
border-left: 1px solid #CCC;
transform-origin: right;
background:url(bg.png) repeat;
}
.left:before{
content: "";
height: 20px;
width: 20px;
border-radius: 50%;
position: absolute;
right:5px;
top:50%;
transform: translate(0,-50%);
border: 1px solid #333;
}
.right:before{
content: "";
height: 20px;
width: 20px;
border-radius: 50%;
position: absolute;
left:5px;
top:50%;
/*向上移动自身的50%*/
transform: translate(0,-50%);
border: 1px solid #333;
}
/*.left:hover{
transform: rotateY(-200deg);
}
.right:hover{
transform: rotateY(200deg);
}*/
section:hover .left{
transform: rotateY(-200deg);
}
section:hover .right{
transform: rotateY(200deg);
}
</style>
</head>
<body>
<section>
<div class="left"></div>
<div class="right"></div>
</section>
</body>
</html>
