-
ease与ease-in-out的去区别： ease：规定慢速开始，然后变快，然后慢速结束的过渡效果。 ease-in-out：规定以慢速开始和结束的过渡效果。 肉眼看不出有太大的区别，只要明白他们两在中间那段的速度快慢有些差别就好。查看全部
-
具体的过渡模式查看全部
-
记得添加浏览器兼容性的前缀！查看全部
-
transition:property duration timing-function delay; property:过渡的属性名称，如果多个，中间用逗号隔开，如果全部属性都要，就用all duration:过渡的时间； timing-function:过渡时的函数，一般有ease,linear,ease-in ,ease-out,ease-in-out; delay:过渡延迟的时间；查看全部
-
做了一个加控件的方块旋转查看全部
-
-webkit-transform: translateZ 轴方向整体平移 \n -webkit-transform: rotateY(45deg) 以轴为圆心旋转 滑竿控件：<input type="range" min="-360"max="360" id="transtatex" value="0" class="reange-control" onchange="translateall()" /> html5中，input type="range"即是滑杆。 rotate旋转，顺时针为正向 translate平移，Z轴平移是近大远小 滑竿的控件 html5中，input type="range"即是滑杆。---复制以便参考查看全部
-
创建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 转换查看全部
-
perspective-origin:50% 50%;视点在浏览器的正中心，也是xyz三轴的交点 transform-style:preserve-3d;变换应用于3d场景 1、确定浏览器将会离将要观察到的3维物体的距离 2、3D中心origin 3、告诉浏览器体现3D效果 -webkit-transition-style: -webkit-preserve-3d查看全部
-
设置3D场景： perspective 视距（浏览器窗口距离3D物体的距离） perspective-origin:50% 50%;视点在浏览器的正中心查看全部
-
设置3D场景： perspective 视距（浏览器窗口距离3D物体的距离） perspective-origin:50% 50%;视点在浏览器的正中心查看全部
-
旋转轴查看全部
-
属性设置查看全部
-
视点，景深查看全部
-
过度模式查看全部
-
分别设置查看全部
举报
0/150
提交
取消