-
perspective:800; 表示浏览器中的物体到浏览器这个平面之间的距离 perspective-origin:50% 50%; 表示视点，即从浏览器哪个位置看进去，这里就是浏览器中心查看全部
-
<style> /*#experiment在这里主要是设置让它支持相应的3维属性*/ #experiment{ -webkit-perspective:800; /*代表我现在浏览器将会离将要观察到的3维物体有800px那么远*/ -webkit-perspective-origin:50% 50%;/*代表我们将从浏览器的正中心来观察这个3维世界*/查看全部
-
transition过渡模式查看全部
-
-webkit-transition:属性 时间 方式查看全部
-
curPage.style.webkitTransform="rotateX(-90deg)";查看全部
-
transform-origin查看全部
-
创建3D场景，浏览器默认是2D的 如果不做下面的设置，即使写transform:translate3d(0,20px,0)实现的也是2d的效果 perspective:800;视距（浏览器窗口距离3D物体的距离），单位px，设置后，物体的显示大小和原来一致，只是规定了一个物体运动的空间 perspective-origin:50% 50%;视点在浏览器的正中心，也是xyz三轴的交点 transform-style:preserve-3d;变换应用于3d场景 上面这三行代码写在应用3D效果元素的父元素上 Z轴是屏幕冲向我们的 transform:translateX(100)向右移动100px transform:translateX(-100)向左移动100px transform:translateY(100)向下移动100px transform:translateY(-100)向上移动100px transform:translateZ(100)向外移动100px（类似放大，原因是物体距离浏览器的间距小了） transform:translateZ(-100)向里移动100px transform:rotateX(45deg)后倾 transform:rotateX(-45deg)前倾 transform:rotateY(45deg)左倾 transform:rotateY(-45deg)右倾 transform:rotateZ(45deg)顺时针转 transform:rotateZ(-45deg)逆时针转 x轴y轴z轴都是，箭头冲向自己，顺时针转为正值，逆时针转为负值查看全部
-
perspective 物体到浏览器的距离 perspective-origin（x,y) 人的视点 transform-style:preserve-3d查看全部
-
perspective：距离远近 perspective-origin：视点 transform：属性 teansform-style:preserve-3d translate位移 translateX(x px) translateY(y px) translateZ(z px) rotate旋转： rotateX(x deg) rotateY(y deg) rotateZ(z deg) transform-origin：调整旋转中心查看全部
-
transition从一个属性值平滑的过度到另一个属性值： transition：<过度属性名称> <过度效果时间> <过渡模式> 过渡模式：ease缓慢开始缓慢结束（默认）； linear匀速； ease-in缓慢开始； ease-out缓慢结束； ease-in-out缓慢开始缓慢结束（与ease有不同）查看全部
-
滑竿控件操作查看全部
-
设置3D场景查看全部
-
设置3D场景查看全部
-
多个属性值过滤效果： -webkit-transiton:<属性1> <时间1>,<属性2> <时间2> 过度模式查看全部
-
防止影响其他设置：overflow：hidden;(位置) 重叠页面：position：relatve;position:absolute;（各自的位置） page1:初始状态不一样。 要设置旋转中心：沿着x轴底部开始：-webkit-transform-origin:bottom; 页面23456起始位置已沿着x轴向后旋转90度：-webkit-trasfrom:rotateX(90deg); 注意点：transition和transform各自的作用，不能混淆。查看全部
举报
0/150
提交
取消