css3倒影变形旋转缩放

一.倒影

:-webkit-box-reflect:

属性值1:位置 [above , below , left , right]

属性值2:间距 像素值

属性值3:渐变-webkit-box-reflect: -webkit-linear-gradient(top,rgba(0,0,0,0) 20%,rgba(0,0,0,0.6))

二.变形transform

旋转:rotate(90deg)

变形原点:transform-origin : [percentage | length | left | center | right] [percentage | length | top | center | bottom]

translate(length[, length]): 指定对象的2D translation(2D平移)。第一个参数对应X轴,第二个参数对应Y轴。translateX(length): 指定对象X轴(水平方向)的平移 translateY(length): 指定对象Y轴(垂直方向)的平移

缩放:scale(number[, number]): 指定对象的2D scale(2D缩放)。第一个参数对应X轴,第二个参数对应Y轴。 scaleX(number): 指定对象X轴的(水平方向)缩放 scaleY(number): 指定对象Y轴的(垂直方向)缩放

扭曲:skew(angle [, angle]): 指定对象skew transformation(斜切扭曲)。第一个参数对应X轴,第二个参数对应Y轴。 skewX(angle): 指定对象X轴的(水平方向)扭曲 skewY(angle): 指定对象Y轴的(垂直方向)扭曲

matrix(a,b,c,d,e,f)ad表示变大,scale,bc表示skew表示扭曲,ef表示平移。

时间: 2024-11-10 17:22:52

css3倒影变形旋转缩放的相关文章

CSS3 Transform变形理解与应用

CSS3 Transform变形理解与应用 Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开始,结束.Animation:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.可以设置多个关键贞. Transition与Animation:transition需要触发一个事件 ,而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元 素cs

iOS 开发----CGAffineTransform平移,旋转,缩放

在做平移,旋转,缩放的时候一定要记住三个步骤: 获取值(获取当前控件的 transform 属性值) 修改值(修改需要设置的 transform 属性值) 赋值   (将修改的 transform 属性的值赋给原来的值) /**   *  平移   *   *  @param transform 获取当前的形变 transform   *  @param tx        沿着 x 水平方向的平移   *  @param ty        沿着 y 垂直方向的平移   *   *  @ret

变形--旋转 rotate()

变形--旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转.它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度.如果这个值为正值,元素相对原点中心顺时针旋转:如果这个值为负值,元素相对原点中心逆时针旋转.如下图所示: HTML代码: <div class="wrapper"> <div></div> </div> CSS代码: .wrapper { width: 200px; height

Android图片旋转,缩放,位移,倾斜,对称完整示例(二)——Bitmap.createBitmap()和Matrix

MainActivity如下: package cc.c; import android.app.Activity; import android.graphics.Bitmap; import android.graphics.Matrix; import android.graphics.drawable.BitmapDrawable; import android.os.Bundle; import android.widget.ImageView; /** * Demo描述: * 利用B

[WebGL入门]十七,递归处理和移动?旋转?缩放

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 本次的demo的运行结果 模型坐标变换矩阵的好处 上次,通过操作模型坐标变换矩阵,绘制了多个模型.这次,继续在此基础上,给多个模型再添加上旋转和放大缩小等处理.看过上一篇文章的人应该知道,在3D渲染的世界里,利用VBO和一部分坐标变换矩阵,只需要少量修改,就可以绘制出大量的模型.当然,计算量也

Android图片旋转,缩放,位移,倾斜,对称完整示例(一)——imageView.setImageMatrix(matrix)和Matrix

MainActivity如下: import android.os.Bundle; import android.view.MotionEvent; import android.view.View; import android.view.View.OnTouchListener; import android.widget.ImageView; import android.app.Activity; import android.graphics.Matrix; /** * Demo描述:

讲解一下iOS图片单指旋转缩放实现方法

最近做一个项目,里边要做图片处理功能,其中就有图片单指旋转,缩放.由于之前还没做过这样的功能,于是乎找了下相关的资料,终于找到了一种好的实现方案.于是就仿照美图秀秀里边贴纸的功能做了一个demo...以下贴一些主要实现代码.... /*****头文件*********/ #import <UIKit/UIKit.h> @interface ImageEditView : UIView // 背景图片 @property (nonatomic, weak, readonly) UIImageVi

【安卓】自定义基于onDraw的任意动画(不仅仅是平移/旋转/缩放/alpha)、!

思路: 1.基于时间的显示映射.如:给定度数,显示圆弧,加上时序,即可有圆弧动画的效果 2.给定时序.用于驱动动画的一帧帧绘制 方案一.基于ObjectAnimator.动画运作时会调用degree对应set函数(基于放射调用),即setDegree. ObjectAnimator ani=ObjectAnimator.ofInt(myView, "degree", 0,300); ani.start(); 注:1>混编后,默认会将setDegree混掉,导致找不到函数,故混编后

用CSS3制作的旋转六面体动画

这是用CSS3制作的旋转的六面体 请用火狐或谷歌浏览器预览,有些旋转角度做的不够好,请大神指教 top bottom left right front back