您的位置：首页 > Web前端 > CSS

CSS3d 基础

2016-06-30 22:00 393 查看

-webkit-transform-style:-webkit-preserve-3d;//设置3D转换

translateX:px; 平移
translateY:px;
translateZ:px;

rotateX:deg; 旋转
rotateY:deg;
rotateZ:deg;

transform-origin://旋转中心

X轴    left   center    right

Y轴    top   center    bottom

Z轴    length px

三维属性
-webkit-perspective:800;  表示Z轴距离，浏览器距离3D物体的距离
-webkit-perspective-origin:50% 50%;表示浏览器正中心看过去

<style type="text/css">
*{margin:0px;padding:0px;}
ul{list-style:none;}
#test{
margin-top: 100px;
-webkit-perspective:800;
perspective:800;
-webkit-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
overflow: hidden;
}
.block{
position:relative;
height:300px;
width: 300px;
margin:0px auto;
-webkit-transform-style: preserve-3d;/* 设置其子元素的3D属性*/
transform-style: preserve-3d;
}
.block li{
height:100%;
width:100%;
background-color: #000;
color:#FFF;
position:absolute;
line-height:100%;
font-size:300px;
text-align:center;
-webkit-transition:-webkit-transform 1s linear;
transition:transform 1s linear;
-webkit-transform-origin:bottom;
transform-origin:bottom;
}
#test2,#test3,#test4,#test5,#test6{
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
}
</style>
</head>
<body>
<!--创建3D场景-->
<div id="test">
<!--内容-->
<ul class="block">
<li id='test1'>1</li>
<li id='test2'>2</li>
<li id='test3'>3</li>
<li id='test4'>4</li>
<li id='test5'>5</li>
<li id='test6'>6</li>
</ul>
</div>
<div class="btn" style="width:300px;margin:0 auto;text-align:center;">
<a href="javascript:prev()">prev</a> <a href="javascript:next()">next</a>
</div>
</body>
<script type="text/javascript">
var clearIndex = 1;
function next(){
if(clearIndex==6){
return;
}
var currentIndex = document.getElementById('test'+clearIndex);
currentIndex.style.transform = 'rotateX(-90deg)';
currentIndex.style.webkitTransform = 'rotateX(-90deg)';
clearIndex++;
var nextIndex = document.getElementById('test'+clearIndex);
nextIndex.style.transform = 'rotateX(0deg)';
nextIndex.style.webkitTransform = 'rotateX(0deg)';
}
function prev(){
if(clearIndex==1){
return;
}
var currentIndex = document.getElementById('test'+clearIndex);
currentIndex.style.transform = 'rotateX(90deg)';
currentIndex.style.webkitTransform = 'rotateX(90deg)';
clearIndex--;
var prevIndex = document.getElementById('test'+clearIndex);
prevIndex.style.transform = 'rotateX(0deg)';
prevIndex.style.webkitTransform = 'rotateX(0deg)';
}
</script>

3D翻页效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航