css3之2d转换(transform方法)
来源:互联网 发布:点对点视频软件 编辑:程序博客网 时间:2024/06/10 05:29
学习资料:菜鸟教程,http://www.runoob.com/css3/css3-2dtransforms.html;
1.transform的属性之一:translate移动,
translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。
效果不是特别好看,直接上代码;
css代码
#tanslate{
height: 100px;
width: 100px;
background: orange;
margin: 50px 50px;
transition: .5s linear;
}
#tanslate:hover{
transform: translate(100px,100px);
}
html代码:
<div id="tanslate">我是发生移动</div>;
2.rotate旋转:在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。
transform: rotate(30deg);
-ms-transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
3.scale()宽高的缩放:该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数。
代码:
#scale{
transform:scale(0.5,3);
-ms-transform: scale(0.5,3);
-moz-transform: scale(0.5,3);
}
宽变为原来的二分之一,高变为原来的两倍。
4.skew()倾斜角度:
分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。
#scale{
transform:skew(45deg,30deg);
-ms-transform: skew(45deg,30deg);
-moz-transform: skew(45deg,30deg);
}
5,matrix:他有六个参数,可以进行旋转,平移,倾斜,缩放;
上代码:.box:hover .borther-box{
transform: matrix(0.8,0.5,-0.5,0.8,0,0);
}
效果图:
- css3之2d转换(transform方法)
- HTML5学习笔记—CSS3 transform转换属性(2D/3Dtransform方法)
- css3 transform 2D转换(动画系列一)
- css3的transform 2D 转换
- CSS3属性之transform 矩阵转换深入讨论(2D)
- css3-2D-transform之translate平移
- CSS3 2D和3D转换 Transform
- CSS3 2D和3D转换(transform)
- CSS3 Transform(2D变换)
- CSS3特效之转换transform
- css3之2D转换
- CSS3----转换(旋转)transform
- CSS3 2D Transform 详细讲解
- css3 2D--transform--scale缩放
- CSS3 3D transform
- CSS3 3D Transform
- CSS3 3D Transform
- CSS3 3D Transform
- webpack配置相关知识详解
- 算法 一致性哈希算法
- excel数据分析--vlookup函数的使用
- 文章标题
- C语言链表-创建链表并且从键盘输入赋值
- css3之2d转换(transform方法)
- 常规验证码制作
- Dijkstra(迪杰斯特拉)算法模板
- 一个简单的Servlet登陆案例
- 更换kernel的logo
- LeetCode笔记 -- LongestSubStringLength
- 工厂方法(factory-method)模式
- IARSTM8 "unable to allocate space for sections "问题解决与改良
- Springboot学习笔记(四)