css ps倒过来

html-css06

css ps倒过来,第1张

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

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

你可以使用HTML和CSS来设计输出一个用*字符形成的倒立的等腰三角形,具体代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Inverted Triangle</title>

<style>

/* 设置三角形的宽度和高度 */

.triangle {

width: 0

height: 0

border-left: 50px solid transparent

border-right: 50px solid transparent

border-bottom: 100px solid #000

}

</style>

</head>

<body>

<div class="triangle"></div>

</body>

</html>

代码如下:

<html>

<meta charset="UTF-8"/>

<head>

<title>This is a test!</title>

<style>

.test {

filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=2)

/* IE6,IE7 */

ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"

/* IE8 */

-moz-transform: rotate(-180deg)

/* 火狐3.5+ */

-o-transform: rotate(-180deg)

/* Opera 10.5 */

-webkit-transform: rotate(-180deg)

/* Safari 3.1+, Chrome */

position: absolute

}

</style>

</head>

<body>

<div class="test">Hello world!你好,世界!</div>

</body>

</html>