一个盒子里面装两个同宽高的盒子,利用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值,单位是像素。