为了账号安全,请及时绑定邮箱和手机立即绑定
  • 注意,在排列立方体时,每一个面旋转后,该面对应的x、y、z三个轴也是会旋转的。不同面的x、y、z轴不同。整个立方体的旋转,只需控制六个面所在的父层(这里的ul)旋转即可。注意父层所在的位置,需要在立方体的中间切面,如此旋转ul时,旋转中心才会在立方体的中心。当然,如果ul不在立方体的中心截面上,另外计算transform-origin值也是可以的,但是没人愿意这么麻烦又不讨好
    查看全部
    1 采集 收起 来源:编程挑战

    2015-08-20

  • 3D制作
    查看全部
    1 采集 收起 来源:编程挑战

    2015-08-19

  • -webkit-:谷歌浏览器 -moz-:火狐浏览器 -o-:欧鹏浏览器
    查看全部
    1 采集 收起 来源: CSS3中transition

    2014-11-14

  • 不好看,凑活看
    查看全部
    1 采集 收起 来源:编程挑战

    2015-08-02

  • 正方体的旋转效果
    查看全部
    1 采集 收起 来源:编程挑战

    2015-07-31

  • 创建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
    查看全部
    1 采集 收起 来源: CSS3中transition

    2014-10-19

  • 要实现跟视频一样的效果,首先要清楚:-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的了
    查看全部
    1 采集 收起 来源: JS部分

    2015-07-07

  • -moz-transtion→火狐 -o-transition→欧朋
    查看全部
    1 采集 收起 来源: CSS3中transition

    2018-03-22

  • 创建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 转换
    查看全部
    1 采集 收起 来源:创建3D场景

    2015-06-09

  • perspective; perspective-origin transform;translate,rotate
    查看全部
    1 采集 收起 来源: CSS3中transition

    2015-04-10

  • <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

    查看全部
    1 采集 收起 来源:transform属性

    2019-02-28

  • 浏览器作为窗口,三维物体距离窗口的距离:

    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()

    查看全部
    1 采集 收起 来源:创建3D场景

    2019-02-28

  • transition :<过渡属性名称><过渡时间><过渡模式>

    过渡模式:transition-timing-function

    ease 缓慢开始,缓慢结束(默认)

    linear 匀速

    ease-in 缓慢开始

    ease-out 缓慢结束

    ease-in-out 缓慢开始缓慢结束(效果稍有不同)

    查看全部

举报

0/150
提交
取消
课程须知
本课程适合有html、css基础知识的同学进阶学习
老师告诉你能学到什么?
如何使用CSS3来创建一个3D的动画效果

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!