deg 角度,配合 变形属性 transform 的 rotate ( num deg) 来使用,意思指为旋转多少角度。如果不指明圆心,默认为dom节点左上角顺时针开始旋转。 .deg{ height: 100px; background: #eee; -moz-transform: rotate(2deg); -webkit-transform: rotate(2deg); transform: rotate(2deg); //顺时针方向旋转 2 度 } grad 梯度,配合 变形属性 transform 的 rotate ( num grad) 来使用。如果不指明圆心,默认为dom节点左上角逆时针开始旋转。 .grad{ background: #027F78; height: 100px; -webkit-transform: rotate(2grad); -moz-transform: rotate(2grad); -ms-transform: rotate(2grad); transform: rotate(2grad); //逆时针方向旋转 2 度 } 角度中含梯度,同样的高度,可以模拟出一个三维图形 <div class="deg"> <div class="grad"></div> <div class="rad">弧度</div> <div class="turn">转圈</div> </div> rad 弧度,配合 变形属性 transform 的 rotate ( num rad) 来使用,不好控制 .rad{ background: #555555; height: 200px; -webkit-transform: rotate(2rad); -moz-transform: rotate(2rad); transform: rotate(2rad); } turn 转圈,容器内的元素相对转圈的容器,在旋转,旋转的圆心不好控制,num 最大为 1 .turn{ background: #027F78; height: 200px; -webkit-transform: rotate(.7turn); -moz-transform: rotate(.7turn); -ms-transform: rotate(.7turn); transform: rotate(.7turn); }
时间: 2024-08-24 06:27:49