CSS3中rotate的作用

一。CSS3中的transform(旋转)允许您翻转,旋转,缩放和倾斜元素。
transform(旋转)是一种让元素更改形状,大小和位置的效果。
CSS3支持2D和3D转换。

例子:

<html>
<head>
    <style>
        #first {
            background-color: yellow;
            width: 200px;
            height: 200px;
            margin: 100px;
            transform: rotate(0deg);
            transition: transform 1s ease;
        }
        #first:hover {
               transform: rotate(500deg);     //rotate()方法里的deg数值越大,旋转的越久。
        }
    </style>
</head>
<body>
    <div id="first">w3cschool</div>
</body>
</html>

transition可以有以下值:
ease-动画开始缓慢,然后加速(此为default默认值)
ease-in:缓步开始,然后加速,突然停止。
ease-out:快速启动,但减速停止。
ease-in-out:类似与缓冲,但更加微妙的加速和减速。
linear:匀速转换。

顺便说一下贝塞尔曲线,英文全称为(cubiz-bezier),cubiz-bezier()函数,它允许你在cubiz-bezier函数中定义你自己的值,值从0到1.
代码格式如下:
transition-timing-fucntion:cbiz-bezier(0,0,1,1);
因为这个函数较为复杂,本人又比较菜,所以有兴趣的同学可以去百度一下。

二。CSS3中的transform:rotate(),当rotate()中的值为正值时,顺时针旋转。
当rotate()中的值为负值时,逆时针旋转。
例子如下:

div.positive{
width:200px;
height:100px;
margin-top:30px;
background-color:red;
transform:rotate(10deg);
}
div.negative{
width:200px;
height:100px;
margin-top:30px;
background-color:red;
transform;rotate(-10deg);
}
  • 1
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 像素格子 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值