css同时旋转rotate3d,CSS3 旋转 rotate3d()rotatez()应用实例

在CSS3中，rotate属性用于设置对象(如 div、ul li、文字等)旋转，可设置对象在 X、Y 和 Z轴的旋转角度；只设置X和Y轴的称为2d旋转，X、Y和Z轴同时设置的称为3d旋转；2d旋转在前面的文章中已经介绍过，本篇继续介绍3d旋转的情况。

有旋转这个属性，使CSS3能制作出变化多样的动画效果，特别是能制作3d效果的动画。以下是rotatez()和rotate3d()的语法规则和具体的应用实例。

一、rotatez语法规则

rotatez()

rotatez用于设置对象在Z轴的旋转角度，表达式中的表示旋转角度，例如 30deg(30度)。

二、rotate3d语法规则

rotate3d(, , , )

三个：分别表示 X、Y 和 Z 轴方向，都不能省略；

：设置对象设置对象的旋转角度，不能省略；

三、rotatez()和rotate3d()应用实例

1、rotatez()应用实例

html代码：

transform:rotatez(50deg);

CSS样式：

.rotatez{transform:rotatez(50deg);width:250px;height:100px; border:1px solid #ab9595;background-color:#e3e2e0;padding:8px;}

效果图：

transform:rotatez(50deg);

从效果图中，可以看出长方形及其其中的文字都旋转了50度。

2、rotate3d()应用实例

html代码：

transform:rotate3d(1,2,1,60deg);

CSS样式：

.rotate3d{transform:rotate3d(1,2,1,60deg);width:290px;height:100px; border:1px solid #ab9595;background-color:#e3e2e0; padding:8px;}

效果图：

transform:rotate3d(1,2,1,60deg);

从图中可以看出，原本是一个平放的长方形，设置rotate3d效果后，长方形已经斜了，并且还有一点透视效果，上大下小，立体感十分强。

css同时旋转rotate3d,CSS3 旋转 rotate3d()rotatez()应用实例相关推荐

css制作流程卡片,css3卡片效果制作代码实例
Insert title here /* 顶部的盒子 */ .container{ width:1320px; margin:50px auto; } /* 翻转类样式 */ .flip{ width ...
css旋转不围绕圆心,css3：元素总是围绕中心旋转[关闭](css3: element always rotates around center [closed])...
css3:元素总是围绕中心旋转[关闭](css3: element always rotates around center [closed]) 我有这个演示 . 如图所示,元素围绕其中心旋转,但我正 ...
css旋转按钮制作,css3 旋转按钮使用CSS3创建一个旋转可变色按钮
想把访客引到另一个页面?添加一个很炫的按钮是个很好的办法 !今天的文章提出了如何使用css3创建一个旋转,旋转,可变色按钮. 这是一个演示旋转的css3按钮.让我们先从html: 复制代码代码如下: ...
CSS - 使用CSS3旋转文本
前言 CSS3提供了一个旋转文本的简单方法.如果项目不需要使用复杂的画布元素,使用transform:rotate属性不失为一个易于实现的解决方案. 准备工作在HTML文档中写下一行文本.打起精神来 ...
【CSS3】rotate3d() 中的参数是什么意思？
其它 3D 正方体演示:[CSS3]2D/3D 转换函数文章目录 CSS3中的3D旋转函数rotate3d() 什么是矢量(向量)? 向量的坐标表示二维坐标系(平面直角坐标系) 三维坐标系(空间直 ...
css3动画旋转360度,CSS3旋转动画(360度旋转、旋转放大、放大、移动) 用法和实例...
CSS3旋转动画(360度旋转.旋转放大.放大.移动) 用法和实例 Internet Explorer 10.Firefox.Opera 支持 transform 属性. Internet Explo ...
3D旋转（CSS3）
3D旋转(CSS3) <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
炫酷的动画特效—css3旋转立方球体
炫酷的动画特效-css3旋转立方球体想要实现旋转立方球体特效,以下的内容你不容错过. 要理解的知识点形成一个3D空间: transform-style:preserve-3d (让父元素形成3D, ...
css animation 图片65%角旋转,沿着z轴旋转
用css实现图片斜侧着沿着z轴旋转效果一.原始图一.最终效果图底部图片例子: 一.html代码 <div class="active-box" v-show=" ...

css同时旋转rotate3d,CSS3 旋转 rotate3d()rotatez()应用实例

css同时旋转rotate3d,CSS3 旋转 rotate3d()rotatez()应用实例相关推荐

最新文章

热门文章