自贡网站seo,网站开发需求表模板,张家港哪家做企业网站,做外贸在什么网站好前言#xff1a;之前我有写过CSS3的transform这一这特性#xff0c;对于它的用法#xff0c;还不是很透彻#xff0c;今天补充补充#xff0c;呵呵 你懂的#xff0c;小司机准备开车了。 a)再提一提transform的四个属性 ①旋转---rotate(参数a)#xff0c;单位deg之前我有写过CSS3的transform这一这特性对于它的用法还不是很透彻今天补充补充呵呵 你懂的小司机准备开车了。 a)再提一提transform的四个属性 ①旋转---rotate(参数a)单位deg表示旋转角度正数顺时针负数逆时针。 ②缩放---scale(参数a)单位1也就是“没有单位”赤裸裸的0-1之间的数字就行表示为缩放比例。 ③倾斜---skew(参数a,参数b)单位deg两个参数分别表示x,y方向上的倾斜角度正数顺时针负数逆时针。 ④移动---translate(参数a)单位px移动方向是在div这个平面方向上(这样说起来应该有点难理解放在四维坐标中把div看做是任意一个平面来理解)也有正数之分正向前负向后。 1)旋转(rotate)我们先来做一个文字的旋转就像下面这样 /* HTML */
div classdiv1我只是一个示例/div 然后再给它写点样式 1 /* CSS */3 .div1 {4 width: 200px;5 height: 50px;6 font-size: 20px;7 line-height: 50px;8 text-align: center;9 border: 1px solid;
10 margin: 100px auto;
11 -moz-transform: rotate(45deg);/* Firefox 旋转属性参数表示角度(deg表示角度)负数逆时针正数顺时针 */
12 -webkit-transform: rotate(45deg);/* Safari和Chrome */
13 -ms-transform: rotate(45deg);/* IE 9 */
14 -o-transform: rotate(45deg);/* Opera */
15 } 这是效果图下图是一行文字被顺时针旋转45度后的效果图。 2缩放(scale) 1 /* HTML */
2 div classdiv2我只是一个示例/div 1 /* CSS */2 .div2 {3 width: 612px;4 height: 408px;5 font-size: 20px;6 margin: 100px auto;7 background: url(img/4.jpg);8 -moz-transform: scale(0.5);/* 缩放属性 ,参数表示缩放倍数0-1之间 */ 9 -webkit-transform: scale(0.5);
10 -ms-transform: scale(0.5);
11 -o-transform: scale(0.5);
12 } 这是效果图下图表示原图和被缩小0.5倍后的效果图 3倾斜(skew) 1 /* HTML */
2 div classdiv3我只是一个示例/div 1 /* CSS */2 .div3 {3 width: 412px;4 height: 208px;5 font-size: 20px;6 margin: 100px auto;7 background: url(img/4.jpg);8 -moz-transform: skew(30deg, 30deg);/* 倾斜属性参数分别表示x,y方的倾斜角度负数逆时针正数顺时针 */ 9 -webkit-transform: skew(30deg, 30deg);
10 -ms-transform: skew(30deg, 30deg);
11 -o-transform: skew(30deg, 30deg);
12 } 这是效果图下图表示一张正图经过 x方向上顺时针旋转30度y方向顺时针旋转30度后的效果。 4移动(translate) 1 /* HTML */
2 div classdiv4我只是一个示例/div 1 /* CSS */2 .div4 {3 width: 612px;4 height: 408px;5 font-size: 20px;6 margin: 100px auto;7 background: url(img/4.jpg);8 -moz-transform: translate(100px);/* 移动属性 移动方向是在div这个平面方向上*/ 9 -webkit-transform: translate(100px);
10 -ms-transform: translate(100px);
11 -o-transform: translate(100px);
12 } 我在写的时候这个移动单一用的话真看不出什么效果单一运用写出来的效果真的不尽人意下面我们直接把四个属性组合起来一起用写一个看着逼格稍稍高点的效果以往看着别的网站有这个效果当时 觉得真不错这两天有时间就把它写出来呵呵来看看吧 5整合旋转、缩放、倾斜和移动。 首先了我们要先敲出一个水平方向上的水平面看着有点像四维的咯 1 /* HTML */
2 div classdiv5我只是一个示例/div 1 /* CSS */3 .div5 {4 width: 612px;5 height: 408px;6 font-size: 20px;7 color: #FFFFFF;8 margin: 100px auto;9 background: url(img/907878604.jpeg);
10 -moz-transform: rotate(-17deg) scale(0.5) skew(67deg) translate(0px);/* 旋转-缩放-倾斜-移动 */
11 -webkit-transform: rotate(-17deg) scale(0.5) skew(67deg) translate(0px);
12 -ms-transform: rotate(-17deg) scale(0.5) skew(67deg) translate(0px);
13 -o-transform: rotate(-17deg) scale(0.5) skew(67deg) translate(0px);
14 box-shadow: -15px 7px 10px 3px #444;
15 float: left;
16 position: relative;
17 left: 30%;
18
19 } 看看效果是有点丑了呵呵如果配上一个3D背景我相信效果会更好视觉效果会更强 下面我们再写两个复制修改下代码再看看 1 /* HTML */
2 div classdiv5_1我只是一个示例/div
3 div classdiv5_2我只是一个示例/div 1 /* CSS */2 .div5_1 {3 width: 612px;4 height: 408px;5 font-size: 20px;6 color: #FFFFFF;7 margin: 40px auto;8 background: url(907878604.jpeg);9 -moz-transform: rotate(-17deg) scale(0.5) skew(67deg) translate(0px);/* 旋转-缩放-倾斜-移动 */
10 -webkit-transform: rotate(-17deg) scale(0.5) skew(67deg) translate(0px);
11 -ms-transform: rotate(-17deg) scale(0.5) skew(67deg) translate(0px);
12 box-shadow: -15px 7px 10px 3px #444;
13 position: absolute;
14 left: 30%;
15 }
16 .div5_2 {
17 width: 612px;
18 height: 408px;
19 font-size: 20px;
20 color: #FFFFFF;
21 margin: -20px auto;
22 background: url(img/907878604.jpeg);
23 -moz-transform: rotate(-17deg) scale(0.5) skew(67deg) translate(0px);/* 旋转-缩放-倾斜-移动 */
24 -webkit-transform: rotate(-17deg) scale(0.5) skew(67deg) translate(0px);
25 -ms-transform: rotate(-17deg) scale(0.5) skew(67deg) translate(0px);
26 box-shadow: -15px 7px 10px 3px #444;
27 position: absolute;
28 left: 30%;
29 } 看着是不是空间感更强了如果你细心研究写在页面上的话再加一些事件、色彩在它上面我相信视觉冲击力就上来了。 总结transform的几个属性用法就是这样的前端的各种特效都是自己慢慢细心研究出来的特效嘛就像拍电影一样要投入时间和精力你做出来的东西才会耳目一新页面给用户的视觉感色彩感才会更强。这是关于CSS3的动画、阴影的一个地址可以参考学习下http://www.css3maker.com/ 交流群:192713488转载于:https://www.cnblogs.com/webonline/p/6077198.html
