本来是看见一篇PS的教程贴,叫做《PS新手教程:变换角度!让你的设计稿更上档次》,地址如下:

http://www.uisdc.com/simple-steps-decorate-ui

平时也算一个设计师,所以就想屁颠屁颠的去试试,结果自己没折腾出来,回头问同事,被告知只有最新的PS CS6的完整版中才有这个3D功能。好吧,重装那个好蛋疼的,突然想到CSS3似乎也有相应的旋转啊,试试呗,然后随手写了几行,就试验出来了下面这个东西:

点击查看原图

其实就是用了一个css3的旋转和投影,整体CSS代码如下:

body {
	padding: 0;
	margin: 0;
	background: #f0f0f0;
}
.imgwh {
	float:left;
	width: 150px;
	height: 150px;
	margin: 200px;
}
.imgskew {
	-webkit-transform: skew(-60deg, 30deg);
}
.dropShadow {
	-webkit-filter: drop-shadow(20px 20px 20px #666);
}
.title {
	font-family: 微软雅黑, 华文细黑, WenQuanYi Micro Hei, 华文黑体, 宋体, Arial;
	font-size: 28px;
	float: left;
	color: #666;
	margin-top:240px;
}
我往服务器丢了一份,可以去看看实际效果,需要有webkit内核的浏览器,我用的chrome调试出来的,其他的浏览器没看。

演示地址:http://timepw.com/design/filter/

看起来透视还是有些问题,正上班呢,就没时间细研究了,闲下来再说~

 

今天(11.20)试验了下,把透视给折腾出来了,需要改几个参数,但是出来效果还是有点二逼,锯齿严重,求抗锯齿效果!

.imgbox {
	-webkit-transform-style: preserve-3d;
	-webkit-perspective: 700px;
}
.imgskew {
	-webkit-transform: rotate3d(180, -45, 30, 90deg);
}
.dropShadow {
	-webkit-filter: drop-shadow(40px 20px 20px #666);
}
效果如下:

点击查看原图

调试的时候,瞬间感觉立体几何全还给老师了啊有木有,什么时候恶补下去~囧

 

这两天(2014年9月11日)写一个demo的时候无意中发现一些文章介绍chrome下怎么抗锯齿的,不过是关于字体抗锯齿的(webkit内核浏览器字体抗锯齿:-webkit-font-smoothing: antialiased;),另外上面提到的图片的抗锯齿还是很bug,但是有人提出一个方案说在使用rotate3d的时候,后面加上一句translateZ(0)能抗锯齿,我愣是没测试出来,看之前他的demo,他只是将图片在x轴和y轴上转了下,所以抗锯齿不错,我这个还有景深呢,后来经过一番测试无意中发现一个问题,这个很bug的锯齿居然是dropdown-shadow引起的!真是我去啊!虽然据说加上一句:(-webkit-transform-style: preserve-3d;)可以一定程度抗锯齿,但是不明显,我把阴影改成boxshadow了(box-shadow: 40px 20px 60px #666;),然后就看起来是这个德行了:

点击查看原图

比起上面一张似乎好了很多,但是强迫症伤不起啊!还是看着不爽。。。目前没有更好的办法了,先把代码上传上去了,还是之前的地址就可以看到效果,代码自己看,就不附了~

« 上一篇:初窥五维创意卡 令人兴奋的android4.4:下一篇 »

发表评论·············

可以使用Ctrl+Enter快速发表哦!