1、首先新建一个html5文档，完成基本代码编写，如下图所示。2、然后新建一个长100像素，高50像素背景为红色的长方形图层。3、接着通过输入“border-radius:50%/50%”属性，如下图所示，将长方形图层设置成一个椭圆形。4、接下来就是将椭圆旋转了，用“transform:rotate(30deg)”将椭圆旋转30度。5...
css3中怎样定义动画的旋转中心点
div{transform: rotate(45deg);transform-origin:20% 40%;/*定义动画的旋转中心点*/-ms-transform: rotate(45deg); /* IE 9 */-ms-transform-origin:20% 40%; /* IE 9 */-webkit-transform: rotate(45deg);/* Safari 和 Chrome */-webkit-transform-origin:20% 40%;/* Safari 和 Chrome */-moz-transform: rotate(45deg);/* Firefox */-moz-transform-origin:20% 40%;/* Firefox */-o-transform: rotate(45deg);/* Opera */-o-transform-origin:20% 40%;/* Opera */}transform-origin: x-axis y-axis z-axis;
值
描述
x-axis
定义视图被置于 X 轴的何处。可能的值：
left
center
right
length
%
y-axis
定义视图被置于 Y 轴的何处。可能的值：
top
center
bottom
length
%
z-axis
定义视图被置于 Z 轴的何处。可能的值：
length
2016-07-06
1、首先新建一个html5文档，完成基本代码编写，如下图所示。
2、然后新建一个长100像素，高50像素背景为红色的长方形图层。
3、接着通过输入“border-radius:50%/50%”属性，如下图所示，将长方形图层设置成一个椭圆形。
4、接下来就是将椭圆旋转了，用“transform:rotate(30deg)”将椭圆旋转30度。
5、这样就实现了用css3将椭圆旋转，如下图所示预览即完成了。
2021-06-02
