css3 2d转换

<!DOCTYPE html>
<html>
<head>
<title>2D转换</title>
<style type="text/css">
.box{
width: 400px;
height: 400px;
margin: 100px auto;
position: relative;
}
img:nth-child(1){
width: 400px;
height: 400px;
}
img:nth-child(2){
width: 150px;
height: 200px;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
/*translate平移 单位px 也可以使用百分比
translate()只写一个值的时候代表的是x的偏移 两个参数代表是x，y的偏移
*/
/*transform: translateY(10%) translateX(10%);*/
/*transform: translate(10px,100px);*/
/* scale 单位是数值 缩放 scaleX()代表在x方向上缩放 scaleY()代表在y轴上缩放
scale()只有一个值的时候代表xy方向上都进行缩放
不能为负值 负值时取的是绝对值*/
/*transform: scale(2);*/
/*skew 单位是deg角度
skew()只有一个参数的时候 代表在x轴上倾斜 两个参数的时候代表分别在xy轴上倾斜*/
/*transform: skew(10deg,20deg);*/
/*rotate旋转单位是角度 rotateX代表绕着x轴顺时针旋转
rotateY代表绕着y轴顺时针旋转
rotate()一个参数的时候代表在Z轴上旋转 不能多个值*/
transform: rotate(20deg);
/*transform-origin可以来决定旋转的位置 默认的是50% 50%
也可以设置成关键词如left top center center等等*/
transform-origin: center center;
}
</style>
</head>
<body>
<div class="box">
<img src="img/bg-grid.jpg">
<img src="img/dameizi.jpeg">
</div>
</body>
</html>

时间： 2024-11-01 11:08:24

css3 2d转换的相关文章

css3 2d转换3d转换以及动画的知识点汇总

css3 2d转换 2d转换的方法: 1.移动 translate(x, y) 可以改变元素的位置,x.y可为负值: 2.缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x.y的取值可为小数,不可为负值: 4.旋转 rotate(deg) 可以对元素进行旋转,正值为顺时针,负值为逆时针: 5.倾斜 skew(deg, deg) 可以使元素按一定的角度进行倾斜 2d转换的属性: transform transform-origin 用法: 例如: div { transform:

CSS3 2D 转换【旋转transform:rotate（30deg）; 移动transform: translate(50px,100px); 放大缩小transform:scale(2,4)】

CSS3 2D 转换 CSS3 转换 CSS3转换,我们可以移动,比例化,反过来,旋转,和拉伸元素. 它是如何工作? 变换的效果,让某个元素改变形状,大小和位置. 您可以转换您使用2D或3D元素. 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号. 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号. Property           transform 36.0 4.0 -webkit- 10.0 9.0 -ms- 16.0 3.5

【Demo】CSS3 2D转换

2D转换: 2D变换方法: translate() 根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动. div { transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari and Chrome */ } translate值(50px,100px)是从左边元素移动50个像

CSS3 2D 转换

2D 转换 在本章中,您将学到如下 2D 转换方法: translate() rotate() scale() skew() matrix() 您将在下一章学习 3D 转换. 实例 div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg);

css3 2D转换效果

CSS中的2D变形主要用transform属性来实现,其可以用来控制元素的变形,如移动,比例化,反过来,旋转,和拉伸. transform属性的基本语法如下 1.translate() 移动元素,即基于X和Y 坐标重新定义元素位置. 用法如下: transform:translate(300px,200px): 或 transform:translateX(300px): transform:translateY(300px):12342.rotate() 旋转元素,其后括号内写旋转的角度,正值

css3 2D转换（2D Transform） 动画（Animation）

transform 版本:CSS3 内核类型 写法 Webkit(Chrome/Safari) -webkit-transform Gecko(Firefox) -moz-transform Presto(Opera) -o-transform Trident(IE) -ms-transform W3C transform none:无转换 matrix(<number>,<number>,<number>,<number>,<number>,&

我最喜欢用的css3之2D转换之translate用法

CSS3 2D 转换 div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg); /* Opera */ -moz-transform: rotate(30deg); /* Firefox */ } translate() 方法 通过 tr

CSS3 2D

2D变换的效果,让某个元素改变形状,大小和位置. 新转换属性 2D 转换方法 参考:CSS3 2D转换

css3之2D转换

css3---2D转换 css3中出现了许多新的特性,其中2D转换我觉的非常有意思,通过她,我们能够对元素进行移动.缩放.转动.拉长或者拉伸,所以希望在这里和大家分享以下. 这里,我将会介绍到以下转换方法: translate() rotate() scale() skew() 首先,我们先插入一个简单的html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-