css3动画之两面翻转的盒子

html-css013

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)

跳跃的忘记了