css元素旋转原点,使用transform-origin属性改变元素变换原点
使用CSS中的旋转函数可以让元素旋转指定的角度,比如transform:rotate(45deg)这条声明是表示将元素顺时针旋转45度,这里的旋转是按照一个默认的原点进行的,在CSS里可以使用transform-origin属性自定义元素变换的原点坐标,下面简单的做一个示例试试看:#x {
margin:100px;
width:150px;height:80px;
background-color:#49f;
transform:rotate(45deg);
}
这里给一个id为x的元素定义了旋转45度,旋转前后的对比图如下:
从对比图可以看出,元素的旋转原点默认是元素的中心,如果用transform-origin属性来表示,则可以是:transform-origin:center;
或者通过百分比定义原点,所以默认情况下也就相当于:transform-origin:50% 50%;
除了可以使用center定义原点,还可以使用left,right,top和bottom这几个值,与背景定位的定义方法类似,比如上面的示例中如果将原点设置为元素的左上角,则可以定义为:transform-origin:left top;
下图是旋转前后的对比图:
很明显,此时旋转是以左上角为原点的。
除了通过这几个值定义以外,还可使用具体的长度值来定义原点的坐标,例如刚才定义的左上角也可以定义为:transform-origin:0 0;
对本示例来说,如果将原点改为右下角可以有下面三种方式:transform-origin:100% 100%;
transform-origin:150px 80px;
transform-origin:right bottom;
这里transform-origin可以改变的变换原点,并不是只对旋转函数起作用,同样可以用于其他变形函数,例如:#x {transform:scale(0.8)}
这里使用scale方法将元素尺寸缩放到它的0.8倍,默认情况下同样是基于元素的中心来变换的,下面是变换前后对比图:
如果这时候设置变换的原点为左上角,也就是:transform-origin:0 0;
则元素会基于左上角进行缩放,下面是对比图:
如果给transform-origin属性设置1个值,则表示设置x轴方向的原点坐标,如果设置2个值,则表示分别设置x轴和y轴的原点坐标,如果设置3个值,则分别表示x轴,y轴和z轴的原点坐标,其中z轴坐标的定义用于设置3D变换的原点坐标。刚才所说的默认原点坐标,如果算上z轴,则应当定义为:transform-origin:center center 0;
下面是一个用CSS实现的简单风车图案:
制作这个旋转的风车,就必须用到transform-origin属性。这里首先定义8个div分别表示8个扇叶,以便采用CSS旋转来分别定义它们的位置:
下面是CSS部分,先将8个扇叶定位到相同的位置,再设置变换原点为右下角,通过分别设置旋转的角度便可实现这个风车的图案:body {
background-color:#eee;
overflow:hidden;
}
#windmill {
position:absolute;left:0;right:0;top:0;bottom:0;
margin:auto;
width:300px;height:300px;
animation:one 12s linear infinite; /*--这里顺便定义旋转的动画--*/
}
@keyframes one {
0% {transform:rotate(0deg);}
100% {transform:rotate(-360deg);}
}
.mill {
border-radius:75px 20px 0 75px/72px 20px 0 75px;
width:75px;height:150px;position:absolute;
transform-origin:right bottom;
}
.w1 {
left:75px;
background-color:#fa2;
}
.w2 {
left:75px;
background-color:#ff6;
transform:rotate(-45deg);
}
.w3 {
left:75px;
background-color:#3ca;
transform:rotate(-90deg);
}
.w4 {
left:75px;
background-color:#f3f;
transform:rotate(-135deg);
}
.w5 {
left:75px;
background-color:#96b;
transform:rotate(-180deg);
}
.w6 {
left:75px;
background-color:#e66;
transform:rotate(-225deg);
}
.w7 {
left:75px;
background-color:#2a1;
transform:rotate(-270deg);
}
.w8 {
left:75px;
background-color:#5be;
transform:rotate(-315deg);
}
根据默认的层级,后设置的元素层级会覆盖在之前的元素之上,为了让第一个“扇叶”能覆盖最后一个,这里在它之上再覆盖一个小三角形:.w1:after {
content:"";
position:absolute;right:0;bottom:0;
width:0px;height:0px;
border-right:90px solid transparent;
border-bottom:90px solid #fa2;
transform:rotate(45deg);
transform-origin:right bottom;z-index:1;
}
接着采用伪元素配合阴影属性,制作风车中间的圆:#windmill:before,#windmill:after {
content:" ";
border-radius:50%;
position:absolute;left:0;right:0;top:0;bottom:0;
margin:auto;
}
#windmill:before {
width:40px;height:40px;z-index:3;
background-color:#acd;
box-shadow:0px 0px 0px 12px #fff;
}
#windmill:after {
width:160px;height:160px;z-index:2;
box-shadow:0px 0px 10px 2px #fff;
}
这样以来,一个旋转的彩色风车就做好了。(点这里预览这个风车的Demo)
本站站长小泽(英文名: Colin),80后自由职业者,QQ号为84688099,建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下:
转载请注明来自:http://www.cssaaa.com/css3/152.html
css元素旋转原点,使用transform-origin属性改变元素变换原点相关推荐
- CSS中用 opacity、visibility、display 属性将 元素隐藏 的 对比分析
说明 opacity 用来设置透明度 display 定义建立布局时元素生成的显示框类型 visibility 用来设置元素是否可见. opacity.visibility.display 这三个属性 ...
- 使用CSS3的appearance属性改变元素的外观
前段时间在<修复iPhone上submit按钮bug>中介绍了使用"-webkit-appearance: none; "来改变按钮在iPhone下的默认风格,其实我们 ...
- CSS知识点——盒子布局及一些常用属性
CSS知识点--盒子布局及一些常用属性 - 盒子布局 先上一张图,方便理解后面的布局内容 盒子布局的主体通常为 div 标记(分区标签),这里不得不提一下 span 标签,它也是一个区域标签,但是区别 ...
- 认识DOM的三大节点:元素节点,文本节点,属性节点以及nodeName,nodeType,nodeValue的区别
既然我们把网页文档看做树形结构,那么就有对应的节点.诚然DOM中有三大节点,分别是元素节点,文本节点,属性节点 元素节点:构成了DOM的基础.文档结构中,<html>是根元素,代表整个文档 ...
- 空间(3D)转换:使用transform属性实现元素在空间内的位移、旋转、缩放等效果
空间转换 目标:使用transform属性实现元素在空间内的位移.旋转.缩放等效果 空间:是从坐标轴角度定义的. x .y 和z三条坐标轴构成了一个立体空间,z轴位置与视线方向相同. 空间转换也叫3D ...
- CSS3变形和动画:旋转、扭曲、缩放、位移、矩阵 、原点 transform-origin、过渡属性 transition-property、过渡所需时间 transition-duration...
无意中发现了一个巨牛的人工智能教程,忍不住分享一下给大家.教程不仅是零基础,通俗易懂,而且非常风趣幽默,像看小说一样!觉得太牛了,所以分享给大家.点这里可以跳转到教程. 旋转.扭曲.缩放.位移.矩阵 ...
- css变换transform 以及 行内元素的一些说明
变换transform的用法比较简单:[变换其实和普通的css属性,如color等没什么区别,可以为变换应用过渡或动画,就像其他普通css属性一样] #test { transform: transl ...
- transform三大属性之rotate(旋转)
transform三大属性之rotate 其他:transform三大属性rotate.scale.translate 菜鸟实例 rotate(angle)定义2D旋转 --原点为基点 rotateX ...
- CSS3的transform:将元素旋转,缩放,移动,倾斜
Transform属性应用于元素的2D或3D转换.这个属性允许你将元素旋转,缩放,移动,倾斜等. transform: translate(-50%,-50%); 向左移动一半 向下移动一半
最新文章
- C++ string字符串的比较是否相等
- 分享一些好用的 Chrome 插件!
- 电路 | 抗干扰技术
- 未能加载文件或程序集“System.Data.SQLite, Version=1.0.96.0, Culture=neutral, PublicKeyToken=db937bc2d44ff139...
- 吴恩达机器学习与深度学习作业目录 [图片已修复]
- 一个月工资6500,一年存了五万左右,算节省吗?
- 实现Kubernetes跨集群服务应用的高可用
- c语言宏定义数组_利用数组处理批量数据 C语言程序编写定义与利用数组技巧全归纳...
- 【MapReduce】MapReduce工作机制
- 数据库系统概论(第五版) 王珊 第一章课后习题答案
- 最详细教学--实现win10 多用户同时远程登录内网机--win10+frp+rdpwrap+阿里云服务器
- kernel ramdump分析--如何启动crash
- 中国四大资产管理公司 ACM
- python-scrapy模拟登陆网站--登陆青果教务管理系统(三)
- 【Windows】使用Window自带远程桌面远程
- php 文本域,关于使用文本域(TextArea)的一个问题
- HIDS入侵检测能力评估list
- git学习笔记(全,附命令大全)
- 抓取网易云评论,生成词云图
- 《MySQL DBA:SSL连接》
热门文章
- 9.1 Git 与其他系统 - 作为客户端的 Git
- 深入剖析基于并发AQS的(独占锁)重入锁(ReetrantLock)及其Condition实现原理
- 物联网安全与隐私保护之物联网安全体系
- (2021网络安全中职组脚本)免费的脚本哦!
- 【西语】【5】Qué clase de persona eres 你是什么样的人
- Win10 Linux 子系统(WSL)监听端口报错Error `IN6_IS_ADDR_V4MAPPED (sin6-sin6_addr.s6_addr32)` Failed的处理
- 阿里云网盘,图什么?
- 黄页 - 埃及的官方网上商业指南和本地搜索引擎
- [收藏]《观察与思考》:相信中国,寻找下一个比尔·盖茨
- iOS 即时聊天 音频格式转NSData