-
要实现跟视频一样的效果，首先要清楚：-webkit-perspective，-webkit-transform-style两个属性的使用，这两个属性的作用是他们的子集，例如视频提到的，我们要翻页的是“page”,“#pagegroup”是“page”的父级，那么这两个属性要在“#pagegroup”定义。而对3d对象“page”设置-webkit-transform-origin旋转中心和过渡-webkit-transition: -webkit-transform 1s linear。例子中“#pagegroup”还有一个父级，在“my3dspace”设置“overflow: hidden”在我们翻转页面的时候，被翻过的页面就会被隐藏起来。但是不能在“#pagegroup”设置，因为设置了“overflow: hidden”，“page”就会变成是2d的了查看全部
-
transform-origin：设置调整旋转中心查看全部
-
1、transition:<过渡属性> <过渡时间> 2、transition-property:<过渡属性> transition-duration:<过渡时间> 3、transition设置多个属性的过渡效果2种方法： (1) transition:<属性1> <时间1>,<属性2> <时间2>,... (2) transition:<属性1> <时间1> transition:<属性2> <时间2> 4、transition:<过渡属性> <过渡时间> <过渡模式> 过渡模式有5种：ease(默认，缓慢开始缓慢结束)、linear(匀速)、ease-in(缓慢开始)、ease-out(缓慢结束)、ease-in-out(缓慢开始缓慢结束，和ease稍有区别) 比如：transition-timing-function:linear查看全部
-
mark！有待改进，亲们可以用js正则来获取当前的transform属性哦！查看全部
-
-webkit-transition 谷歌、苹果 -moz-transition 火狐 -o-transition opera 动画效果 transition:"<过度属性民称 ‘例：color width height ’> <过度时间 ‘1s...100s ’> <过度模式 ‘ease linear ease-in ease-out ease-out-in’>" 使用CSS3.0创建简单的3D场景 -perspective;perspective-origin //创建3维场景 -transform:translate //平移 -transform:rotate //旋转 ------------------- transition的五种模式： ease：缓慢开始，缓慢结束 linear：匀速 ease-in：缓慢开始 ease-out：缓慢结束 ease-in-out：缓慢开始，缓慢结束 ------------------------------ -webkit-transition-property:color; -webkit-transition-duration:1s; -webkit-transition-timing-function:ease; 多个属性过渡效果：-wenkit-transition:<属性1><时间1> -wenkit-transition:<属性2><时间2> -wenkit-transition:<属性3><时见3查看全部
-
有待改进，mark查看全部
-
顺时针如果正方向，那不是应该朝外了吗？？因为y轴正方向是竖直向下的查看全部
-
注意大小写啊！查看全部
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> <style type="text/css"> div{ width: 100px; height:100px; color: white; background-color: orange; margin-top: 20px; } div:hover{ width: 99%; } .linear{ -webkit-transition: width 3s linear ; } .ease{ -webkit-transition: width 3s ease; } .ease-in{ -webkit-transition: width 3s ease-in; } .ease-out{ -webkit-transition: width 3s ease-out; } .ease-in-out{ -webkit-transition: width 3s ease-in-out; } </style> </head> <body> <div class="linear">linear</div> <div class="ease">ease</div> <div class="ease-in">ease-in</div> <div class="ease-out">ease-out</div> <div class="ease-in-out">ease-in-out</div> </body> </html>查看全部
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3D</title> <style> #experiment{ -webkit-perspective:800; -webkit-perspective-origin:50% 50%; -webkit-transform-style:-webkit-preserve-3d; } #block{ width:500px; height:500px; background-color:#ccc; margin:100px auto; -webkit-transform:rotateX(45deg); } </style> </head> <body> <div id="experiment"> <div id="block"> </div> </div> </body> </html>查看全部
-
transition的五种模式： ease：缓慢开始，缓慢结束 linear：匀速 ease-in：缓慢开始 ease-out：缓慢结束 ease-in-out：缓慢开始，缓慢结束查看全部
-
chrome和safari下可以，鼠标放上开始转查看全部
-
css3的动画功能 transion: 从一个属性值平滑过渡到另一个属性值 《过渡属性名称》《过渡时间》 -webkit-transition: color-1s; animation:通过支持关键帧的技术在网页上做出更加复杂的效果查看全部
-
要实现跟视频一样的效果，首先要清楚：-webkit-perspective，-webkit-transform-style两个属性的使用，这两个属性的作用是他们的子集，例如视频提到的，我们要翻页的是“page”,“#pagegroup”是“page”的父级，那么这两个属性要在“#pagegroup”定义。而对3d对象“page”设置-webkit-transform-origin旋转中心和过渡-webkit-transition: -webkit-transform 1s linear。例子中“#pagegroup”还有一个父级，在“my3dspace”设置“overflow: hidden”在我们翻转页面的时候，被翻过的页面就会被隐藏起来。但是不能在“#pagegroup”设置，因为设置了“overflow: hidden”，“page”就会变成是2d的了查看全部
-
可以常温习，训练对3D的理解度。 opera和IE都不支持3D转换。火狐测试OK，已经适配CHROME，但是我只装了火狐，希望CHROME的同学看一下能否正常显示，谢谢！！查看全部
举报
0/150
提交
取消