这是一个3d翻页效果。看不懂里面position：relative；和position：absolute
|
|
| |
| |
| |
| #my3dspace{ |
| -webkit-perspective: 800; |
| -webkit-perspective-origin: 50% 50%; |
|
|
| overflow:hidden; |
| } |
| #pagegroup{ |
| width:400px; |
| height:400px; |
| margin:0 auto; |
|
|
| -webkit-transform-style:preserve-3d; |
|
|
| position: relative; |
| } |
| .page{ |
| width:360px; |
| height:360px; |
| padding:20px; |
| background-color: black; |
|
|
| color:white; |
|
|
| font-weight:bold; |
| font-size:360px; |
| line-height:360px; |
| text-align:center; |
|
|
| position:absolute; |
| } |
| #page1{ |
| -webkit-transform-origin:bottom; |
| -webkit-transition: -webkit-transform 1s linear; |
| } |
| #page2,#page3,#page4,#page5,#page6{ |
| -webkit-transform-origin:bottom; |
| -webkit-transition: -webkit-transform 1s linear; |
| -webkit-transform: rotateX(90deg); |
| } |
|
|
| #op{ |
| text-align:center; |
| margin: 40px auto; |
| } |
| |
|
|
| |
| |
| |
| |
| |
| 1
|
| 2
|
| 3
|
| 4
|
| 5
|
| 6
|
|
|
|
|
|
|
| |
| next previous |
|
|
| |
| |
|
免责声明：本内容仅代表回答会员见解不代表天盟观点，请谨慎对待。
版权声明：作者保留权利，不代表天盟立场。
|
|
|
|
|
|
|
|
说我自己的理解吧，absolute绝对定位，就是改元素，常见的为div和图片，效果是不会被父级的位置影响。
再来说，relative相对定位
举例，ul导航条一般默认的是relative。我比较回答，希望能采纳 |
|
|
|
|
|
|
|
|
position:relative;与position:absolute;叫做相对布局和绝对布局,作用是对具体的容器进行定位,相对布局和绝对布局是页面设计中常用的布局形式,它脱离了文档流.
一般情况下,如果对一个盒子进行绝对布局,那么必须要对其父盒子声明相对布局才会起效果,如果盒子没有自定义父盒子,那么浏览器会默认body为它的父盒子
一般情况下,可以遵循"子绝父相"的思路来进行绝对定位!
举个栗子:
.parent{
width:100%;
height: 500px;
position:relative;
}
.son{
position: absolute;
width:200px;
height: 300px;
top:100px;
left:30px;
}
.son中的top和left就是对定位的位置描述!不过建议你在这个网站上去看看关于postion的课程,都讲的很好!比如说 深入理解absolute 业界大牛张鑫旭讲的课程!
希望对你有用! |
|
|
|
|
|
|
|
|
天盟APP下载
