从零开始前端学习[34]:Cs3中的2D变换,transform变换,
来源:互联网 发布:java必看书籍知乎 编辑:程序博客网 时间:2024/06/07 03:18
Cs3中的transition变换-transform变换
- transform属性
- transform-origin基点属性
提示:
博主:章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041
transform属性
之前已经使用过关于transform相关的属性了。如rotate,但是并没有具体研习过其属性具体的属性值是什么。在这里详细的说明一下相关的介绍一下
transform:rotate(deg)旋转属性
rotate本来就是旋转的意思,在这里也是,其转换特性是其旋转的度数
注意:rotate中的填写的参数可以有三种形式:deg,turn,rad
deg很直白,就是角度的意思。turn为圈数的单位,rad是弧度的意思。并且如果你想让其往相反方向进行旋转的话,这个时候可能需要的在其前面添加一个负号
因为其有一个rotateZ,说明其可以在立体三维z轴方向上进行旋转,首先可以了解一下其旋转方向的相关东西
从上图中就可以看到x,y,z的正轴方向以及其反向
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8--> <meta name="Generator" content="EditPlus®"> <!--编辑器的名称--> <meta name="Author" content="作者是谁"> <meta name="Keywords" content="关键词"> <meta name="Description" content="描述和简介"> <style type="text/css"> body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;} ul,ol{margin: 0; list-style: none; padding: 0;} a{ text-decoration: none; } *{ margin: 0; padding: 0; } div{width: 1200px;margin:50px auto;box-shadow: 0 0 10px 0 deeppink;border: 1px solid transparent} div p{width: 100px;height: 100px;line-height: 100px;text-align: center;background: green;margin: 30px;transition: 2s} div p:nth-child(1):hover{transform: rotate(180deg)} /*div p:nth-child(1):hover{transform: rotate(0.5turn)}*/ div p:nth-child(2):hover{transform: rotateX(-180deg)} div p:nth-child(3):hover{transform: rotateY(180deg)} div p:nth-child(4):hover{transform: rotateZ(180deg)} </style></head><body> <div class="main"> <p>rotate</p> <p>rotateX</p> <p>rotateY</p> <p>rotateZ</p> </div></body></html>
显示效果如下所示:
注意:默认的情况下是绕着Z轴开始旋转的
transform:scale缩放属性
scale是缩放的意思,其也是有多个属性值的,并且其内部可以有多个参数,如
transform: scale(0.2,1.2); transform: scale(0.2);
当一个值的时候既代表X轴又代表Y轴,当两个值的时候,第一个代表的是X轴,第二个代表的是Y轴
注意:
当里面的值大于1的时候,表示放大原来的多少倍
当里面的值小于1的时候,表示缩小为原来的多少倍
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8--> <meta name="Generator" content="EditPlus®"> <!--编辑器的名称--> <meta name="Author" content="作者是谁"> <meta name="Keywords" content="关键词"> <meta name="Description" content="描述和简介"> <style type="text/css"> body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;} ul,ol{margin: 0; list-style: none; padding: 0;} a{ text-decoration: none; } *{ margin: 0; padding: 0; } div{width: 1200px;margin:50px auto;box-shadow: 0 0 10px 0 deeppink;border: 1px solid transparent} div p{width: 100px;height: 100px;line-height: 100px;text-align: center;background: green;margin: 30px;transition: 2s} div p:nth-child(1):hover{transform: scale(2)} div p:nth-child(2):hover{transform: scaleX(0.5)} div p:nth-child(3):hover{transform: scaleY(1.5)} div p:nth-child(4):hover{transform: scaleZ(0.2)} /**对于2d图形来说,在z轴方向上面其实并没有什么效果*/ </style></head><body> <div class="main"> <p>scale</p> <p>scaleX</p> <p>scaleY</p> <p>scaleZ</p> </div></body></html>
注意的是,这个z轴缩放,针对二维的图形来说,scaleZ其实并没有多少效果显示出来,但是对3D图形的话,这个就是可以的
transform:translate(X,Y)位移属性
transform:translate位移属性,唯一之后,原来的位置是不会被其他的元素占用的,兵器移动到其他位置的时候,不会去影响其他元素的站位,
当一个值的时候代表的是X轴方向上移动
两个值的时候,第一个值代表的是X轴,第二个值代表的是y轴的方向
transform:translate(100px)transform:translate(100px,100px);
注意:位移后元素的初始位置依然占据,且移动后并不会影响其他元素的布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8--> <meta name="Generator" content="EditPlus®"> <!--编辑器的名称--> <meta name="Author" content="作者是谁"> <meta name="Keywords" content="关键词"> <meta name="Description" content="描述和简介"> <style type="text/css"> body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;} ul,ol{margin: 0; list-style: none; padding: 0;} a{ text-decoration: none; } *{ margin: 0; padding: 0; } div{width: 1200px;margin:50px auto;box-shadow: 0 0 10px 0 deeppink;border: 1px solid transparent} div p{width: 100px;height: 100px;line-height: 100px;text-align: center;background: deeppink;margin: 30px;transition: 2s} div p:nth-child(1):hover{transform: translate(100px,100px)} div p:nth-child(2):hover{transform: translateX(100px)} div p:nth-child(3):hover{transform: translateY(100px)} div p:nth-child(4):hover{transform: translateZ(50px)} /**需要3D环境支持的时候,才有效果*/ </style></head><body> <div class="main"> <p>translate</p> <p>translateX</p> <p>translateY</p> <p>translateZ</p> </div></body></html>
显示效果如下所示:
transform:skew(deg)旋转属性
transform: skew() 倾斜 单位:角度只有一个值的时候,往x轴方向倾斜两个值的时候,第一个值代表x轴,第二个值代表y轴
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8--> <meta name="Generator" content="EditPlus®"> <!--编辑器的名称--> <meta name="Author" content="作者是谁"> <meta name="Keywords" content="关键词"> <meta name="Description" content="描述和简介"> <style type="text/css"> body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;} ul,ol{margin: 0; list-style: none; padding: 0;} a{ text-decoration: none; } *{ margin: 0; padding: 0; } div{width: 1200px;margin:50px auto;box-shadow: 0 0 10px 0 deeppink;border: 1px solid transparent} div p{width: 100px;height: 100px;line-height: 100px;text-align: center;background: green;margin: 30px;transition: 2s} div p:nth-child(1):hover{transform: skew(30deg)} div p:nth-child(2):hover{transform: skew(30deg,30deg)} div p:nth-child(3):hover{transform: skewX(30deg)} div p:nth-child(4):hover{transform: skewY(30deg)} </style></head><body> <div class="main"> <p>skew</p> <p>skew</p> <p>skewX</p> <p>skewY</p> </div></body></html>
- 从零开始前端学习[34]:Cs3中的2D变换,transform变换,
- 从零开始前端学习[35]:Cs3中的效果的基点变换
- 从零开始前端学习[36]:Cs3中的3D效果实现
- transform 3D 变换
- CSS3 Transform(2D变换)
- CSS3 3D transform变换
- css3 3D transform 变换
- CSS3 3D transform变换
- CSS3 3D transform变换
- CSS3 3D transform变换
- CSS3 3D transform变换
- CSS3 3D transform变换
- CSS3 3D transform变换
- CSS3 3D transform变换
- 从零开始前端学习[33]:Cs3中的transition过渡-animation动画
- CSS3 中的 2D 变换
- Transform变换
- Transform变换
- FPGA论剑
- eclipse&&myeclipse debug调试教程
- 音视频编解码基础知识(1)- 音视频编解码过程
- Unity3D 初识序列化相反序列化
- MYSQL 术语(官网翻译)-B
- 从零开始前端学习[34]:Cs3中的2D变换,transform变换,
- 十进制,八进制,十六进制数的表示方法
- tomcat端口被占用
- PAT 1004. 成绩排名 (20) JAVA
- hdu1269迷宫城堡(tarjan求强连通分量模板)
- 安装Opencv.*在Ubuntu16.04 cuda8.0环境下
- FPGA论剑(续)
- 举例说明弱密码摄像头的简单破解方法,不涉及敏感信息,仅供防范!
- ASP.NET 判断微信浏览器