-
注意,在排列立方体时,每一个面旋转后,该面对应的x、y、z三个轴也是会旋转的。不同面的x、y、z轴不同。整个立方体的旋转,只需控制六个面所在的父层(这里的ul)旋转即可。注意父层所在的位置,需要在立方体的中间切面,如此旋转ul时,旋转中心才会在立方体的中心。当然,如果ul不在立方体的中心截面上,另外计算transform-origin值也是可以的,但是没人愿意这么麻烦又不讨好查看全部
-
3D制作查看全部
-
-webkit-:谷歌浏览器 -moz-:火狐浏览器 -o-:欧鹏浏览器查看全部
-
不好看,凑活看查看全部
-
正方体的旋转效果查看全部
-
创建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 转换查看全部
-
mark查看全部
-
要实现跟视频一样的效果,首先要清楚:-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的了查看全部
-
-moz-transtion→火狐 -o-transition→欧朋查看全部
-
创建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; perspective-origin transform;translate,rotate查看全部
-
<style> /*#experiment在这里主要是设置让它支持相应的3维属性*/ #experiment{ -webkit-perspective:800; /*代表我现在浏览器将会离将要观察到的3维物体有800px那么远*/ -webkit-perspective-origin:50% 50%;/*代表我们将从浏览器的正中心来观察这个3维世界*/ -weblit-transform-style:-webkit-preserve-3d;/*这是要告诉浏览器我们之后要进行的transform的操作都是对一个3D的世界进行的*/ } #block{ width:500px; height:500px; background-color:#69c; margin:100px auto; -webkit-transform:rotateZ(45deg); } </style> <div id="experiment"> <div id="block"></div> </div> ①旋转是以图像或者说块的中心点为基准,进行X,Y,Z方向的旋转; ②rotate方法中x,y,z 是不区分大小写的,但是为了规范还是要写成大写。 ③问题是,在chrome浏览器中审视元素提示 -webkit-transform-style:-webkit-preserve-3d; Invalid property value(无效的属性值),但是有3d的效果。查看全部
-
使用transform-origin调整旋转中心:
x轴:left,center,right
y轴:top,center,bottom
z轴:length px
查看全部 -
浏览器作为窗口,三维物体距离窗口的距离:
webkit-perspective:800px
视点,对应x轴,y轴:
webkit-perspective-origin:50% 50%
用webkit-transform-style:-webkit-preserve-3d告诉浏览器设置的是3D场景
用transform属性调整元素:
translate:
translateX()translateY()translateZ()
rotate:
rotateX()rotateY()rotateZ()
查看全部 -
transition :<过渡属性名称><过渡时间><过渡模式>
过渡模式:transition-timing-function
ease 缓慢开始,缓慢结束(默认)
linear 匀速
ease-in 缓慢开始
ease-out 缓慢结束
ease-in-out 缓慢开始缓慢结束(效果稍有不同)
查看全部
举报