css画钟表_CSS3形变——transform与transform-origin画时钟

css3属性transform和transform-origin“画”时钟

效果图

前言

八哥：哈喽，大家好！好攻城狮就是我就是你们的小八，欢迎收听你的月亮。。。哦不，是很高兴与你们共享知识，诶呀呀，现在夜黑风髙好做事呀，嘿~嘿~嘿，你们懂的！哈哈^_^  哎哟。哟。哟！九儿你轻点。。。

小九：大晚上的不睡觉发什么骚呢！

八哥捂着耳朵：你看看你看看，不单纯了吧！本着学无止境，不分时段，我这是跟学友们探讨技术上的交流呢！

小九：还技术交流，我看你耍流氓吧！哼！今晚罚你睡沙发。。。

八哥：额。。。

一、废话不多说，下面先聊聊变形

变形分为2D和3D变形。今天主要讲，如果通过指定的角度参数对原元素指定一个2D rotation(即2D旋转)，这个时候需要用到transform-origin属性。假设我直接对对象元素进行设置rotate(45deg),它只会以元素本身中心点旋转45度，达不到我们设计时钟时元素(刻线、时针)围绕圆心转。那么这个时候，重点来了！使用transform-origin来对元素进行基点位置改变，使元素基点不在是中心位置，以达到你需要的基点位置。

二、关于元素基点的那些事

下面有三种方法帮你层层理解到位就是啦！

(1)transform-origin他有自己的语法，多数是拿来配合transform：rotate()用。语法表示：transform-origin(X,Y)，它是用来设置元素的运动的基点(参照点)。默认点是元素的中心点。其中X和Y这两值可以是百分值,em,px，其中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值top,center,bottom

transform-origin接受两个参数，它们可以是百分比，em，px等具体的值，也可以是left,center,right，或者 top,center,bottom等描述性参数 ;

top left | left top 等价于 0 0；

top | top center | center top 等价于 50% 0

right top | top right 等价于 100% 0

left | left center | center left 等价于 0 50%

center | center center 等价于 50% 50%(默认值)

right | right center | center right 等价于 100% 50%

bottom left | left bottom 等价于 0 100%

bottom | bottom center | center bottom 等价于 50% 100%

bottom right | right bottom 等价于 100% 100%

其中，left,center right是水平方向取值，对应的百分值为left=0%;center=50%;right=100%而top,center,bottom是垂直方向取值left=0%;center=50%;right=100%。

拿图说话：请看大屏幕(针对以上乱七八糟的数值进行小结)

1

2

3

transform-origin属性

4

5 .testBox{

6 position:relative;

7 left:20px;

8 width:100px;

9 height:100px;

10 border:1px solid black;

11 }

12 .subBox{

13 position:absolute;

14 top:25px;

15 left:25px;

16 width:50px;

17 height:50px;

18 background-color:blue;

19 /*默认值*/

20 transform-origin:50% 50%;

21 /*左上角*/

22 /*transform-origin:top left;*/

23 /*右上角*/

24 /*transform-origin:right top;*/

25 /*右下角*/

26 /*transform-origin:right bottom;*/

27 /*左下角*/

28 /*transform-origin:bottom left;*/

29 transform:rotate(45deg);

30 }

31

32

33

34

35