css3动画之两面翻转的盒子

html-css015

css3动画之两面翻转的盒子,第1张

近期学习c3,了解到两面翻转的盒子的两种制作方式:

一个盒子里面装两个同宽高的盒子,利用backface-visibility设置元素背面是否可见的属性,达到两面翻转的效果

可以的

左移动30像素

-webkit-transform: translateX(-30px)

-moz-transform: translateX(-30px)

-o-transform: translateX(-30px)

-ms-transform: translateX(-30px)

transform: translateX(-30px)

             

             顺时针旋转360°

       

-webkit-transform: rotateZ(360deg)

-moz-transform: rotateZ(360deg)

-o-transform: rotateZ(360deg)

-ms-transform: rotateZ(360deg)

transform: rotateZ(360deg)

跳跃的忘记了

使用transform-origin设置css3旋转中心,分别有两个参数,代表x和y轴的位置。

旋转参考的零点:元素左上角的位置或者说盒子模型的左上角。

参考点的坐标线:向右的x轴和几何x轴一样取正值,向下的y轴和几何y轴相反取正值,图解如下:

CSS transform中的rotate的旋转中心设置有两种:

1.使用关键字设置位置 transform-origin: center bottom 

第一个参数可选center、left、right。分别代表盒模型几何横向中间,横向左侧,横向右侧

第二个参数可选center、top、bottom。分别代表盒模型几何竖向中间,竖向头部,竖向底部

2.使用像素值设置位置 transform-origin:3px 40px两个参数为坐标值的x和y值,单位是像素。