对于ps,首先打开Photoshop,导入需要编辑的图片,用选取工具选定图片,在工具栏中打开滤镜效果,选择反转效果即可。对于css,css实现翻转效果的方法,首先创建一个演示方块,并为其添加transition和transform属性,然后将transition属性添加到需要翻转的p上,最后添加perspective和transform-style属性即可。
"推荐你个系列的教程吧--《Buid New World》第十一集:使用 CSS 增加过渡和其他效果 平移translate,将元素平行移动,参数中分别指定水平方向上的移动距离与垂直方向上的移动距离。旋转,rotate允许你通过传一个角度值来旋转一个元素。
如果设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转。
倾斜,skew可以将一个对象围绕着x和y轴按照一定的角度倾斜,在参数中分别指定水平方向上的倾斜角度与垂直方向上的倾斜角度。
"
感觉自己总是混淆css各种动画效果,所以再这里总结一下
1. transition ,所在元素块样式变动时启动,可用于样式变动时 产生过渡动画效果
| transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
| transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |
| transition-timing-function | 规定速度效果的速度曲线。 |
| transition-delay | 定义过渡效果何时开始。 |
2. tranform :用于平移,旋转,缩放,透视
语法
animation-name 规定需要绑定到选择器的 keyframe 名称。
animation-duration规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function规定动画的速度曲线。
animation-delay规定在动画开始之前的延迟。
animation-iteration-count规定动画应该播放的次数。
animation-direction规定是否应该轮流反向播放动画。
animationname 必需。定义动画的名称。
keyframes-selector 必需。动画时长的百分比。值:0-100%,from(与 0% 相同),to(与 100% 相同)
css-styles 必需。一个或多个合法的 CSS 样式属性。
4.@media :可以根据屏幕大小响应式改变样式
接下来利用transition和transfrom实现一个简单的翻牌效果,先看效果