文字反转 字体变颜色

	xmlns="http://www.w3.org/1999/xhtml">
	http-equiv="Content-Type" content="text/html; charset=utf-8" />
	rel="stylesheet" href="css样式.css" />
	id="div1">
	width="200" border="0">     class="p1">Blue App Template   rowspan="4">class="img1" src="素材/phone.png" />       class="p2">One page Responsive HTML5 parallax business landing page       class="p3">Lorem ipsum dolor sit amet,   consectetur adipisicing elit. Similique autem,   atque in voluptatibus repellat nostrum iusto   architecto vel placeat numquam omnis assumenda.       class="p4">
	@charset "utf-8"; /* CSS Document */ #div1{background-image:url(%E7%B4%A0%E6%9D%90/bg.jpg); width:1000px; height:500px;}/*最外层的一个盒子放的是一张照片*/ table{margin-left:100px; margin:0 auto; height:300px; width:800px; padding:0px;}/*设置宽度高度等一些属性*/ .img1{ width:200px; height:400px;}/*效果右侧的手机图片*/ .img1:hover{transform:skew(0,25deg);/*设置当鼠标划过或停到图片上时图片顺时针倾斜25度*/ -ms-transform:skew(0,25deg); /* Internet Explorer 9*/ -moz-transform:skew(0,25deg); /* Firefox */ -webkit-transform:skew(0,25deg); /* Safari 和 Chrome */ -o-transform:skew(0,25deg);} .p1{ color:#FFF; font-size:20px;}/*左侧文字显示的第一行文字*/ .p1:hover{transform:scale(1,1.2);color:#0FF;}/*设置当鼠标划过或停到文字上时字体放大到原来的1.2倍，其颜色也改变*/ .p2{font-size:15px; color:#FFF;}/*左侧文字显示的第二行文字*/ .p2:hover{transform:rotate(360deg);/*当鼠标划过或停在文字上时字体旋转360度，因为旋转360度以后会变成字体本来的效果所以把旋转的参数值换一下看效果会比较好*/ -ms-transform:rotate(180deg); /* Internet Explorer 9*/ -moz-transform:rotate(180deg); /* Firefox */ -webkit-transform:rotate(180deg); /* Safari 和 Chrome */ -o-transform:rotate(180deg); /* Opera */} .p3{ font-size:13px; color:#FFF;}/*左侧文字显示的第三行文字，没有任何效果*/ .p4{ background-image:url(%E7%B4%A0%E6%9D%90/003.png);font-size:13px; color:#FFF; -webkit-transition-property: background-color;-webkit-transition-duration: 5s; -webkit-transition-timing-function:ease; width:280px; height:60px;}/*左侧最下面*/ .p4:hover{ background-image:url(%E7%B4%A0%E6%9D%90/003.png); background-image:url(%E7%B4%A0%E6%9D%90/001.png);}/*当鼠标放到或划过时背景呈渐变*/