CSS设置标签、图片，放大、缩小、旋转、移动、倾斜(transform)_css 缩小_永恒之月TEL的博客

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

耍酷的红烧肉 · I have to Reset ...· 11 月前 ·

还单身的红金鱼 · 江苏省农业农村厅朱新华副厅长一行到常州大学调研· 1 年前 ·

骑白马的烈马 · 耗资3.6亿！历史剧《诸葛亮传》立项！谁当主 ...· 1 年前 ·

买醉的小熊猫 · 北京理工大学化学与化工学院· 1 年前 ·

直爽的槟榔 · 为什么在docker-compose.yml ...· 2 年前 ·

注意：缩小和放大都是 scale ；其中的值（0~1）代表缩小；大于1代表放大。其中0代表缩小到没有，1代表不变。

tranform:scale(0.5)     /*整体缩小到原来的一半*/
tranform:scale(2)       /*整体放大到原来的一半*/
tranform:scaleX(0.5)     /*宽缩小到原来的一半*/
tranform:scaleX(2)       /*宽放大到原来的一半*/
tranform:scaleY(0.5)     /*高缩小到原来的一半*/
tranform:scaleY(2)     /*高放大到原来的一半*/
 /*好像看不出变化*/
tranform:scaleZ(0.5)     
tranform:scaleZ(2)    
2.旋转属性（rotate）
 
 格式：tranform：旋转类型（旋转度数 deg）; 
transform:rotate(50deg);    /*设置为平面旋转（二维旋转）50度*/
transform:rotateX(360deg)   /*以X轴为旋转中心旋转360度（三维旋转）*/
transform:rotateY(180deg)   /*以Y轴为旋转中心旋转180度（三维旋转）*/
transform:rotateZ(90deg)    /*以Z轴为旋转中心旋转90度（三维旋转）效果和rotate一样*/
transform:rotateX(45deg)rotateY(45deg)rotateZ(45deg)    /*向X、Y、Z方向各偏45度*/
transform:scale(0.5) rotateY(45deg) rotateZ(45deg);    /*缩小0.5倍，并且旋转Y和Z轴45度*/
3.移动属性（translate）
 
 格式1：transform：translateX（数值px） 
 格式2：transform：translateY（数值px） 
 格式3：transform：translateZ（数值px） 
 格式4：transform：translate（数值1px，数值2px） 
 注意：当translateX（）里面是正数时向右边移动，反之向左移动；translateY（）里面是正数时向下移动，反之向上移动。translateZ（）平面上看不出效果变化。 
transform:translateX(100px)    /*向右边移动100px*/
transform:translateX(-100px)    /*向左边移动100px*/
transform:translateY(100px)     /*向下边移动100px*/
transform:translateY(-100px)       /*向上边移动100px*/
transform:translate(100px,-100px)     /*向右上角移动100px*/
transform:translate(-100px,100px)       /*向左下角移动100px*/
4.倾斜属性（skew）
 
 格式1：transform:skewX(倾斜角度deg) 
 格式1：transform:skewY(倾斜角度deg) 
transform:skew(30deg,45deg)  /*向x轴偏移3度，向y轴偏移45度*/
transform:skewX(45deg);     /*向X轴倾斜45度角，向左边倾斜45度*/
transform:skewY(90deg);      /*向Y轴倾斜90度角,相对于是靠右倾斜，直到于y轴成为一条线*/
5.实例运用
 
功能：把鼠标放到图片上，图片自动旋转360度，鼠标移出图片，自动还原。 
<!doctype html>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
/*hover是鼠标悬停在图片上时触发*/
.imgp:hover{	
  /*图片二维旋转360度*/
  transform:rotate(360deg);		
		img{
		  /*给图片设置过度为0.5秒，不设这个太快了看不清图片旋转*/
			transition: 0.5s;
</style>
<img id ="target" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F11499396130%2F0.jpg" alt="#" class="imgp"/>
</body>
</html>
                    CSS设置标签、图片，放大、缩小、旋转、移动、倾斜(tranform)1.缩小和放大属性（scale）格式：tranform：缩小类型（数值）；注意：缩小和放大都是 scale   ；  其中的值（0~1）代表缩小；大于1代表放大。其中0代表缩小到没有，1代表不变。tranform:scale(0.5)     /*整体缩小到原来的一半*/tranform:scale(2)       /*整体放大到原来的一半*/tranform:scaleX(0.5)     /*宽缩小到原来的一半*/
缩放，指的是“缩小”和“放大”。在CSS3中，我们可以使用scale()方法来将元素根据中心原点进行缩放。
跟translate()方法一样，缩放scale()方法也有3种情况：
（1）scaleX(x)：元素仅水平方向缩放（X轴缩放）；
（2）scaleY(y)：元素仅垂直方向缩放（Y轴缩放）；
（3）scale(x,y)：元素水平方向和垂直方向同时缩放（X轴和Y轴同时缩放）；
1、scaleX(x)
transform:scaleX(x)
<div style="height: 35px;width:300px;background:orangered;border-radius: 4px;" id="animat"></div>
#animat{
                position:relative;
                animation:mymove 5s infinite;
class.csstidy.php是解析器
bin / pcsstidy是独立的命令行可执行文件
此类表示CSS解析器，该解析器读取CSS代码并将其保存在数组中。 与大多数其他CSS解析器相反，它不使用正则表达式，因此具有完整CSS3支持和更高的可靠性。 但是，不使用正则表达式的缺点是速度较慢。 除此之外，它还对CSS代码进行了一些优化和修复。
 include('class.csstidy.php');
$csstidy = new csstidy();
// Set some options :
$csstidy->set_cfg('optimise_shorthands', 2);
$csstidy->set_cfg('template', 'high');
// Parse the
在 CSS 中，可以通过以下属性设置 `<img>` 标签图片的属性：
1. `width`：设置图片的宽度，可以使用像素值（如 `width: 200px;`）或百分比（如 `width: 50%;`）来指定。
2. `height`：设置图片的高度，同样可以使用像素值或百分比。
3. `max-width`：设置图片的最大宽度，避免图片超出容器的范围。例如，可以使用 `max-width: 100%;` 来让图片在容器内自适应宽度。
4. `max-height`：设置图片的最大高度，同样可以避免图片超出容器范围。
5. `margin`：设置图片周围的空白区域，例如 `margin: 10px;` 就会在图片周围添加 10 像素的空白区域。
6. `padding`：设置图片内部的空白区域，例如 `padding: 5px;` 就会在图片内部添加 5 像素的空白区域。
7. `border`：设置图片的边框样式，例如 `border: 1px solid black;` 就会在图片周围添加 1 像素的黑色实线边框。
8. `display`：设置图片的显示方式，例如 `display: block;` 将使图片变成块级元素，而 `display: inline;` 将使图片变成行内元素。
9. `float`：设置图片的浮动方式，例如 `float: left;` 将使图片向左浮动。
10. `position`：设置图片的定位方式，例如 `position: absolute;` 将使图片的位置相对于其父元素绝对定位。