css ps倒过来

html-css029

css ps倒过来,第1张

css可以通过perspective属性来实现。ps可以直接通过滤镜中的翻转效果实现。

对于ps,首先打开Photoshop,导入需要编辑的图片,用选取工具选定图片,在工具栏中打开滤镜效果,选择反转效果即可。对于css,css实现翻转效果的方法,首先创建一个演示方块,并为其添加transition和transform属性,然后将transition属性添加到需要翻转的p上,最后添加perspective和transform-style属性即可。

以下是引用片段:

#imgmenu{

width: 450px

height: 25px/*高度是背景图片的一半*/

background: url(/imagelist/06/43/473648jpj0j1.gif)

list-style-type: none

padding: 0px

margin: 0px

}

#imgmenu li{

float: left

}

#imgmenu li a{

display: block

width: 90px

height: 25px

}

#imgmenu li#home a:hover,#activeh{

background: url(/imagelist/06/43/473648jpj0j1.gif) 0 -25px

/*翻转时背景图的位置,左边0px,顶部-25px,

背景图的下半部分,下同*/

}

#imgmenu li#about a:hover,#activea{

background: url(/imagelist/06/43/473648jpj0j1.gif) -90px -25px

/*第二个菜单的位置距左边90px,

每个菜单的宽度是90px*/

}

#imgmenu li#pro a:hover,#activep{

background: url(/imagelist/06/43/473648jpj0j1.gif) -180px -25px

}

#imgmenu li#faq a:hover,#activef{

background: url(/imagelist/06/43/473648jpj0j1.gif) -270px -25px

}

#imgmenu li#contact a:hover,#activec{

background: url(/imagelist/06/43/473648jpj0j1.gif) -360px -25px

}