CSS3中rotate的作用

最新推荐文章于 2021-10-17 18:14:48 发布

G018_star sky♬

最新推荐文章于 2021-10-17 18:14:48 发布

阅读量7.2k

点赞数 2

文章标签： CSS 前端

本文链接：https://blog.csdn.net/qq_42526440/article/details/99647711

版权

一。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);
}

G018_star sky♬

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS3中rotate的作用

一。CSS3中的transform（旋转）允许您翻转，旋转，缩放和倾斜元素。transform(旋转)是一种让元素更改形状，大小和位置的效果。CSS3支持2D和3D转换。例子： w3cschooltransition可以有以下值：ease-动画开始缓慢，然后加速（此为default默认值）ease-in:缓步开始，然后加速，突然停止。ease-out：快...
复制链接

扫一扫