CSS3 实现3D特效

2017-01-04 19:22:59来源:作者:人点击

CSS3 中的动画效果

transition

animate

transition主要是从一个属性平滑过渡到另一个属性,而animate则是结合关键帧技术,实现更加复杂的动画效果;

transion:过渡属性名称 过渡时间

谷歌、opera、火狐、苹果浏览器不支持,注意兼容性

[code]-webkit-transition: color 1s;


实例:我们在让背景颜色做一个改变

[code]<style> #block{width:400px;height:400px;background-color: blue;margin:0 auto; } #block:hover{background-color: red; }</style></head><body> <div id="block"> </div></body>


鼠标悬停上去之后,块状元素的背景颜色立即由蓝色变成红色,如果要实现平滑过渡,只需要在
#block
上添加一个过去属性
-webkit-transition: background-color 3s;
,如何添加在
#block:hover
上,那么就会hover的时候有3s的过渡,失去焦点后,立马变成blue,没有过渡效果;



上面其实是两个属性写在一起,分开写是这样的:;

[code]transition-property:colortransition-duration:1s;


那么如何设置多个属性的过渡效果呢?





[code]<style> #block{width:400px;height:400px;background-color: blue;margin:0 auto;-webkit-transition: background-color 3s linear , height 2s linear; } #block:hover{background-color: red;height:600px; }</style></head><body> <div id="block"> </div></body>




translateX是从屏幕左边到右边;translateY是从上边到下边;translateZ是从屏幕外到里边;外为负数,越大,里为正数,表示越远;rotateX和rotateY都是分别沿着x轴中心与y轴中心逆时针为正,rotateZ是沿着顺时针为正;

使用css3创建简单的3d场景









[code]perspective: 500px;//3D物体距屏幕的距离perspective-origin: 10% 10%;//3D元素基点基于X,Y轴的位置transform:rotate(45deg);//2D/3D转换,旋转,缩放,移动或倾斜


简单的3d场景设置

[code]<style>#experiment{-webkit-perspective: 800; //视距深度-webkit-perspective-origin: 50% 50%; //视距中心-webkit-transform-style:-webkit-preserve-3d;//3d场景}#block{width:500px;height:500px;background-color: #69c;margin:100px auto;-webkit-transform:rotateZ(45deg);} </style></head><body> <div id="experiment"><div id="block"></div> </div></body>![](http://i.imgur.com/ZFi5nP0.gif)### 综合实例:<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>3d场景演示</title> <style>#space3d{-webkit-perspective: 800;-webkit-perspective-origin: 50% 50%;overflow:hidden;}#container{height: 400px;width: 400px;position: relative;margin: 0px auto;-webkit-transform-style:preserve-3d;}.page{height: 360px;width:360px;padding: 20px;position: absolute;background-color: #000;color: #FFF;font-weight: bold;font-size: 360px;text-align: center;/* 垂直居中 */line-height: 360px;/* 水平居中 */-webkit-transform-origin:bottom;-webkit-transition: -webkit-transform 1s linear;}#page2,#page3,#page4,#page5,#page6{-webkit-transform: rotateX(90deg);}#btnoption{margin: 40px auto;text-align: center;/* ... */} </style></head><body> <div id="space3d"><div id="container"><div class="page" id = "page1">1</div><div class="page" id = "page2">2</div><div class="page" id = "page3">3</div><div class="page" id = "page4">4</div><div class="page" id = "page5">5</div><div class="page" id = "page6">6</div></div> </div> <div id="btnoption"><button id="next" value="next" onclick="next()">next</button><button id="prev" value="previous" onclick="prev()">prev</button> </div> <script>var currentIndex = 1;function next(){if(currentIndex == 6){ return;}var currntPage = document.getElementById('page' + currentIndex);currntPage.style.webkitTransform = "rotateX(-90deg)";var nextPage = document.getElementById('page' + ++ currentIndex);nextPage.style.webkitTransform = 'rotateX(0deg)';}function prev(){if(currentIndex == 1){ return;}var currntPage = document.getElementById('page' + currentIndex);currntPage.style.webkitTransform = "rotateX(90deg)";var prevPage = document.getElementById('page' + -- currentIndex);prevPage.style.webkitTransform = 'rotateX(0deg)';} </script></body>


最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台