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

CSS3中rotate的作用相关推荐

css3中变形与动画（三）
transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...
CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...
css3中的变形（transform）、过渡(transtion)、动画(animation)
Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...
CSS3中的3D变换与简易立方体的制作
大家好,这里是demo软件园,今天为大家分享的是css3中的3d变换. 我们首先要知道在浏览器中,X轴是从左到右,Y轴是从上到下,Z轴是从里到外.CSS的3d变换中,有以下属性: A.3D旋转: CS ...
CSS3中3D综合应用及分析
2019独角兽企业重金招聘Python工程师标准>>> 今天我要和大家一起来学习一个酷炫的鼠标Hover效果.主要将会涉及到CSS3中3D效果的使用,以及在实现过程中我们使用到的一些 ...
CSS3中的一些新特性(CSS)
CSS3中的一些新特性 CSS3能做什么边框阴影 box-shadow 颜色文字与字体背景 CSS3中的动画 CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大 ...
css3中的2D和3D转换、动画效果以及布局
文章目录一.2D转换: 1. 2D移动:translate().使用translate()函数,你可以把元素从原来的位置移动.移动参照元素左上角原点 2. 2D缩放: 3. 2D旋转: 4. 2D翻 ...
简单介绍CSS3中的transform的使用方法
一,转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移,旋转,缩放等效果.分为两种转换,分别是2D以及3D转换效果. 转换可以简单理解为的变形,其主要效果有三种: 移动:t ...
html中的transform属性,CSS3中transform属性
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 一.Transform描述: ransform是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转r ...

CSS3中rotate的作用

CSS3中rotate的作用相关推荐

最新文章

热门文章