HTML5技术

3d转换-正方体-Html5Css3-遁地龙卷风 - 遁地龙卷风(2)

字号+ 作者:H5之家 来源:H5之家 2016-10-25 11:00 我要评论( )

left,使用left属性向左移动152px,沿着z轴向后移动75px,已transform-origin: right center 0为变换点沿y轴旋转的90deg,right ,沿着z轴向后移动75px,使用left属性向右移动152px,已transform-origin: left cent

left,使用left属性向左移动152px,沿着z轴向后移动75px,已transform-origin: right center 0为变换点沿y轴旋转的90deg,right ,沿着z轴向后移动75px,使用left属性向右移动152px,已transform-origin: left center 0为变换点沿着y轴旋转-90deg,

top使用top属性向上移动152px,沿着z轴向前移动75px,已transform-origin: center bottom 0;为变换点沿着x轴旋转-90deg,bottom使用bottom属性向下移动152px,已transform-origin: center top 0;为变换点沿着x轴方向旋转90deg。

至此一个立方体搭建好了。

(4)如何看到立体旋转的效果

transition:1s;这个属性是放在六个面的父元素container上,这种思想还应用在布局与控制上,我们旋转的是container,旋转的变换点也在这个平面,默认是transform:center center 0px;因为构建正方体方式的原因,y轴正好位于前后的中间,左右的中间!

(5)疑惑 a. perspective: 800px;

放在container会看到另外一种效果,我猜想是因为定位点变成container,那么在container前面的就会放大,后面就被缩小,从而导致其他几面的变化。可当后面旋转到前面时,后面的大小怎么不变换,哪位同行知道麻烦解答下

b.构建立体正方形还可以使用如下方式

.left{left:-152px;transform: rotateY(90deg);transform-origin: right;}  

.right{left:152px;transform: rotateY(-90deg);transform-origin: left;}  

.top{top:-152px;transform: rotateX(-90deg);transform-origin: bottom;}  

.bottom{top:152px;transform: rotateX(90deg);transform-origin: top;}  

.front{transform: translateZ(152px);z-index:2;}  

.back{z-index:1;} 

设置背景颜色后沿着X轴旋转,旋转到底部的会看到其他面都是底部的颜色,哪位同行知道麻烦解答下。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Canvas坐标系转换 - 方帅

    Canvas坐标系转换 - 方帅

    2016-07-10 15:00

  • 移动开发之设计稿转换页面单位尺寸 - 海角在眼前

    移动开发之设计稿转换页面单位尺寸 - 海角在眼前

    2016-05-01 14:00

  • CSS3动画基本的转换和过渡 - 网站自由开发者

    CSS3动画基本的转换和过渡 - 网站自由开发者

    2016-01-18 17:18

  • .Net下一个类型转换神器 - jiulang

    .Net下一个类型转换神器 - jiulang

    2015-12-08 08:12

网友点评
d