CSS3 实现3D特效

CSS3 中的动画效果

transition
animate

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

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

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

-webkit-transition: color 1s;

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

   <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，没有过渡效果；

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

   transition-property：colortransition-duration:1s;

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

   <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场景

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

简单的3d场景设置

<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>

CSS3 实现3D特效相关推荐

网页特效：用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
css3 3d特效汇总
本篇全是实战,没有基础,如果不明白3d特效的原理,可能会看不懂,不过没关系,给你推荐一下张鑫旭css3 3d转换,或者看我的另一篇博客 css3 2d转换3d转换以及动画的知识点汇总,看完这些3d ...
css3彩色3D文字上下漂浮动画js特效
下载地址一款简单好看的css3彩色3D文字上下漂浮动画特效,支持中文. dd:
CSS3实现3D魔方翻转网页动画特效
CSS3实现3D魔方翻转网页动画特效 <link rel="stylesheet" type="text/css" href="square.c ...
html图片 3d切换特效,一款基于css3的3D图片翻页切换特效
今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 实现的代码. html代码: Bedouin Blue-green Dram ...
css使图片有3d效果,利用CSS3实现3D倾斜视差图片展示特效
特效描述:利用CSS3实现 3D倾斜视差图片展示特效.利用CSS3实现3D倾斜视差图片展示特效代码结构 1. HTML代码 Movies Popular Princess Mononoke Sp ...
css拖动音乐进度条,利用CSS3实现3D滑块进度条拖动动画特效
特效描述:利用CSS3实现 3D滑块进度条拖动动画特效.利用CSS3实现3D滑块进度条拖动动画特效代码结构 1. HTML代码 Scalable 3D Range Sliders Simple ...
css3的动画特效--元素旋转（transition，animation）
css3的动画特效--元素旋转(transition,animation) 开发中,视觉要你实现一个元素的旋转问题,比如说如下图所示: 思路:首先动画动效肯定离不开anmimation动画. 和tra ...
CSS3制作文字特效
今天主要搜集了一些网页中文字用css3制作的特效,并亲自尝试了一下,现把关键的代码和效果贴出来与同学们一起分享,希望能对大家在平时的制作中有所帮助.废话不说,直接进入效果的制作,感兴趣的同学跟着我的代 ...

CSS3 实现3D特效

CSS3 中的动画效果

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

简单的3d场景设置

CSS3 实现3D特效相关推荐

最新文章

热门文章