-
向屏幕外位移100个像素，-webkit-transform: translateZ(100px);是z轴！查看全部
-
在实际对3D物体进行操作时，Y轴的正方向是竖直向下的方向！右边沿向屏幕内旋转45度相应的CSS属性是Y轴！向屏幕外位移100个像素是Z轴！查看全部
-
在实际对3D物体进行操作时，Y轴的正方向是竖直向下的方向！查看全部
-
transition(平滑过渡属性):属性 过渡时间，通常在:hover、:focus条件下触发查看全部
-
good查看全部
-
使用transform-origin属性调整旋转中心查看全部
-
创建3D场景，浏览器默认是2D的 如果不做下面的设置，即使写transform:translate3d(0,20px,0)实现的也是2d的效果 perspective:800;视距（浏览器窗口距离3D物体的距离），单位px，设置后，物体的显示大小和原来一致，只是规定了一个物体运动的空间 perspective-origin:50% 50%;视点在浏览器的正中心，也是xyz三轴的交点查看全部
-
transition:<过渡属性名称><过渡时间><过渡模式> ease - 缓慢开始，缓慢结束 linear - 匀速 ease-in - 缓慢开始 ease-out - 缓慢结束 ease-in-out - 缓慢开始，缓慢结束查看全部
-
-webkit-perspective，-webkit-transform-style两个属性的使用，这两个属性的作用是他们的子集，例如视频提到的，我们要翻页的是“page”,“#pagegroup”是“page”的父级，那么这两个属性要在“#pagegroup”定义。而对3d对象“page”设置-webkit-transform-origin旋转中心和过渡-webkit-transition: -webkit-transform 1s linear。查看全部
-
#my3dspace{ -webkit-perspective:800; -webkit-perspective-origin: 50% 50%; overflow:hidden; } #pagegroup{ width:400px; height:400px; margin:0 auto; -webkit-transform-style:preserve-3d;查看全部
-
使用transform-origin属性调整旋转中心查看全部
-
设置3D时 1、确定浏览器将会离将要观察到的3维物体的距离 2、3D中心origin 3、告诉浏览器体现3D效果 -webkit-transition-style: -webkit-preserve-3d查看全部
-
创建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: 500px;/3D物体距屏幕的距离 perspective-origin: 10% 10%;/3D元素基点基于X,Y轴的位置 transform:rotate(45deg);/2D/3D转换，旋转，缩放，移动或倾斜 transform-origin:20% 40%;/旋转元素的基点位置 perspective:800; 表示浏览器中的物体到浏览器这个平面之间的距离 perspective-origin:50% 50%; 表示视点，即从浏览器哪个位置看进去，这里就是浏览器中心 transform-style: preserve-3d;使被转换的子元素保留其 3D 转换查看全部
-
创建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: 500px;/3D物体距屏幕的距离 perspective-origin: 10% 10%;/3D元素基点基于X,Y轴的位置 transform:rotate(45deg);/2D/3D转换，旋转，缩放，移动或倾斜 transform-origin:20% 40%;/旋转元素的基点位置 perspective:800; 表示浏览器中的物体到浏览器这个平面之间的距离 perspective-origin:50% 50%; 表示视点，即从浏览器哪个位置看进去，这里就是浏览器中心 transform-style: preserve-3d;使被转换的子元素保留其 3D 转换查看全部
-
浏览器坐标轴示意图。。。重要查看全部
举报
0/150
提交
取消