rotate函数css,CSS3函数rotate()怎么使用

我们都知道，在css3里rotate()函数是能够旋转元素的，他主要是在二维空间内进行旋转操作，那么今天我们就给大家带来实例，看一下这个rotate()函数怎么使用。

如果对元素本身或者元素设置了perspective值，那么rotate3d()函数可以实现一个3维空间内的旋转。

关联属性：transform-origin。

取值

rotate();为一个角度值，单位deg，可以为正数或者负数，正数是顺时针旋转，负数是逆时针旋转。

rotateX(angele),相当于rotate3d(1,0,0,angle)指定在3维空间内的X轴旋转

rotateY(angele),相当于rotate3d(0,1,0,angle)指定在3维空间内的Y轴旋转

rotateZ(angele),相当于rotate3d(0,0,1,angle)指定在3维空间内的Z轴旋转

语法

transform:rotate();

CSS

.rotate_clockwise{

-webkit-transform:rotate(45deg);

-moz-transform:rotate(45deg);

position:absolute;

left:10px;

top:80px;

}

.rotate_anticlockwise{

-webkit-transform:rotate(-45deg);

-moz-transform:rotate(-45deg);

position:absolute;

left:200px;

top:80px;

}

.rotateX{

-webkit-transform:perspective(800px) rotateX(60deg);

-moz-transform:perspective(800px) rotateX(60deg);

position:absolute;

left:400px;

top:80px;

}

.rotateY{

-webkit-transform:perspective(800px) rotateY(60deg);

-moz-transform:perspective(800px) rotateY(60deg);

position:absolute;

left:600px;

top:80px;

}

.rotateZ{

-webkit-transform:perspective(800px) rotateZ(60deg);

-moz-transform:perspective(800px) rotateZ(60deg);

position:absolute;

left:800px;

top:80px;

}

HTML

顺时针旋转45度

rotate函数css,CSS3函数rotate()怎么使用相关推荐

html中repeat的作用,深入探究CSS repeat()函数知识及用法
今天为大家讲解一下我最近学的一个CSS中repeat()函数的知识,repeat()函数要想理解透彻它,熟练掌握,需要大家花点时间去学习,因为我也查了很多资料,那么,该如何讲才能让大家更容易理解呢?想 ...
html rotate()函数,CSS rotate()用法及代码示例
rotate()函数是一个内置函数,用于基于给定角度作为参数旋转元素.可以按照度数,刻度,弧度或转角设置角度. 用法: rotate( angle ) 参数:该功能接受代表旋转角度的单个参数角度.正角 ...
R语言使用magick包的image_rotate函数、image_flip函数、image_flop函数对图像进行缩放旋转、镜像、翻转（Rotate or mirror the image）
R语言使用magick包的image_rotate函数.image_flip函数.image_flop函数对图像进行缩放旋转.镜像.翻转(Rotate or mirror the image) 目录
镜像css3,利用css动画属性rotate来实现镜像翻转_WEB前端开发
layui中使用的一些弹出框_WEB前端开发 Layui是一款采用自身模块规范编写的情怀型前端UI框架,本文就来为大家介绍一下layui中使用的一些弹出框,希望对大家有一定的帮助. 要实现镜像翻转,有 ...
CSS3中rotate的作用
一.CSS3中的transform(旋转)允许您翻转,旋转,缩放和倾斜元素. transform(旋转)是一种让元素更改形状,大小和位置的效果. CSS3支持2D和3D转换. 例子: <html ...
css元素转换(旋转函数、rotateX 和 rotateY 的使用、移动函数、缩放函数、过渡、动画)详解
文章目录旋转函数 rotateX 和 rotateY 的使用移动函数缩放函数过渡 transition-timing-function 属性动画旋转函数在 CSS3 中,使用 rotat ...
深入理解CSS3动画 rotate
我这个解释应该是会比较全的,如果有兴趣深入了解CSS3动画的朋友,往下看,也许会有意想不到的收获. 本来想找张浏览器空间坐标轴的图.结果没有找到. 那就听我说,你们想象一下. x轴水平朝右,y轴垂直于 ...
php图片镜像翻转,利用css动画属性rotate来实现镜像翻转
要实现镜像翻转,有两种实现方法: 方法一:利用css动画属性rotate旋转来实现具体代码:.mirrorRotateLevel { transform: rotateY(180deg); /* 水 ...
CSS calc()函数与单位vh 常见height：100vh
calc() 函数属于CSS3版本内容,用于动态计算长度值.例如:width: calc(100% - 10px):需要注意的是,运算符前后都需要保留一个空格.calc()函数支持 "+&q ...

rotate函数css,CSS3函数rotate()怎么使用

rotate函数css,CSS3函数rotate()怎么使用相关推荐

最新文章

热门文章