css hack和转换

最新推荐文章于 2024-07-22 19:28:00 发布

原创最新推荐文章于 2024-07-22 19:28:00 发布 · 196 阅读

0 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

4 篇文章

订阅专栏

本文深入探讨了CSS Hack技巧，旨在解决不同浏览器及版本的兼容性问题，包括类内部Hack、选择器Hack和HTML头部引用Hack。此外，文章还详细介绍了2D和3D转换，包括位移、缩放、旋转和倾斜等效果，以及如何在网页设计中应用这些转换。

CSS Hack
1、解决问题
IE各版本浏览器兼容性问题
2、CSS Hack
浏览器的类型及版本不同会造成CSS的解析效果也各不相同
不同厂商浏览器：IE，Chrome，Firefox，Safari
同一厂商浏览器的不同版本：IE6,IE7,IE8,IE9,IE10
3、CSSHack 原理
使用 CSS 样式属性的优先级来解决兼容性问题
4、CSSHack 分类
1、CSS类内部Hack
通过属性前缀或值后缀的方式来解决兼容性

: 被IE6，IE7识别
- : 被IE6 识别
+，-如果同时出现的话，+只针对IE7，-只针对IE6

注意：
IE7的兼容代码要在上
IE6的兼容代码要在下
属性前缀法：

<style> 
div{  
    background:green;/*forfirefox*/  
    *background:red;/*forIE6 IE7*/  
}  
</style>

2、选择器Hack
在选择器前加上某些浏览器能识别的前缀
div{

}

*前缀：IE6识别
*+前缀：IE7识别

*div{}
*+div{}
3、HTML头部引用Hack
1、原理
通过IE条件注释解决兼容性问题
IE浏览器会根据一个if条件判断，判断指定的内容是要被解析还是被注释

2、语法
				<!--[if 条件 IE 版本]>
					内容
				<![endif]-->

版本：6 ~ 10 数字
条件：
1、gt
大于指定版本的浏览器
2、gte
大于等于指定版本的浏览器
3、lt
小于指定版本的浏览器
4、lte
小于等于指定版本的浏览器
5、!
除条件版本以外的其他版本浏览器

ex:
					<!--[if gt IE 6]>
						该段内容只能在 IE6以上版本的浏览器中显示
					<![endif]-->

					<!--[if IE 8]>
						该段内容只能在IE8中显示
					<![endif]-->

转换
1、转换简介
1、什么是转换
改变元素在页面中的大小，位置，角度和形状的一种方式

2、转换分类
1、2D转换
使元素在x轴和y轴上发生变化效果
2、3D转换
在2D转换基础上，增加 z轴的变化效果
3、转换属性
属性：transform
取值：
1、none
默认值，不进行任何转换
2、转换函数
表示一个或者多个转换函数，如果是多个函数的话，中间以空格分开
4、转换原点
属性：transform-origin
默认情况下，原点是在整个元素的中心位置处
取值：数值/百分比/关键字
两个值：表示 x轴和 y轴的位置
三个值：表示 x轴，y轴，z轴的位置
2、2D转换
1、2D位移
1、属性和函数
属性:transform
函数:
translate(x) :元素在x轴上的位移距离，取值为正，向右移动，取值为负，向左移动
translate(x,y) :
x表示x轴位移距离
y表示y轴位移距离，取值为正，向下移动，取值为负，向上移动
translateX(x) :只改变元素在x轴上的位置
translateY(y) :只改变元素在y轴上的位置
取值：
1、数值
2、百分比
2、2D缩放
1、作用
改变元素在页面中的大小
2、属性和函数
属性：transform
函数：
scale(value),如果只给一个值，那么x轴和y轴将等比缩放
scale(x,y):改变 x轴和y轴的缩放比例
scaleX(x):只改变x轴的缩放比例
scaleY(y):只改变y轴的缩放比例
取值：
默认值为1
缩小：0~1 之间的数值
放大：大于1的数值
3、2D旋转
1、作用
改变元素在页面中的角度
2、属性和函数
属性：transform
函数：rotate(ndeg)
n取值为正，则顺时针旋转
n取值为负，则逆时针旋转
3、注意
1、转换时，坐标轴会一起进行转换
2、转换原点可以影响转换效果
4、2D倾斜
1、作用
改变元素在页面上的形状
2、属性和函数
属性：transform
函数：
skew(xdeg) : x轴倾斜指定角度
实际上时改变 y轴的倾斜角度
取值为正：逆时针
取值为负：顺时针
skewX(xdeg) : 效果同上
skewY(ydeg) : y轴倾斜指定角度
实际上是改变 x轴的倾斜角度
取值为正：顺时针
取值为负：逆时针
3、3D转换
1、3D转换
增加 z轴转换效果
2、属性
属性：perspective
作用：模拟人眼睛到 3D投射元素的距离
注意：该属性需要加在 3D转换元素的父元素上
兼容性：
火狐：-moz-perspective:
Chrome，Safari:-webkit-perspective
Opera:-o-perspective
3、3D旋转
允许元素在 x轴，y轴，z轴上进行旋转操作

属性和函数
属性:transform
函数：
rotateX(xdeg):以x轴为中心轴进行元素的旋转
rotateY(ydeg)
rotateZ(zdeg)
rotate3D(x,y,z,ndeg)
x,y,z,如果取值为 0的话，说明该轴不参与旋转
x,y,z,如果取值为 1的话，说明该轴是参与旋转的

rotate3d(0,0,1,45deg)-- rotatez(45deg)

rotate3d(1,1,0,45deg)

rotateY() 旋转
	div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg);	
-moz-transform: rotateY(130deg);	
}

4、3D位移
1、作用
改变元素在z轴上的位置
2、属性和函数
属性：transform
函数：
translateZ();
translate3D(x,y,z)
3、属性 : transform-style
作用：规范当前元素的子元素如何去排列3D位置
取值：
1、flat
默认值，不保留子元素的3D位置
2、preserve-3d
保留子元素3d位置
实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS3旋转实例</title>
	</head>
	<style>
		.photo-container {
			perspective: 1200px; 
			width:45%;
			float:left;
		}
		.rotate-box {
			position:relative;
			transform-style: preserve-3d; 
			transition:1s ease; 
			margin:10%;
		}
		.rotate-box img {
			width:100%;
			height:auto;
		}
		.text {
			position:absolute;top:0;
			width:100%;height:100%;
			transform: rotateY(180deg) translateZ(1px); 
			color:#666;
			text-align:center;
			opacity:.06;
			background:rgba(255,255,255,.9);
			transition: 1s opacity;
		}
		.photo-container:hover .rotate-box{
			transform: rotateY(180deg);
		}
		.photo-container:hover .text{
			opacity:1;
		}
		.rotate-box:after {
			content:' ';
			display:block;
			width:100%;
			height:7vw; 
			transform:rotateX(90deg);
			background-image: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
			
	</style>
	<body>
		<div class="photo-container">
			<div class="rotate-box">
				<img src="img/beijing.png"/>
				<div class="text">
					<h2>这是一个标题</h2>
					<p>床前明月光</p>
				</div>
			</div>
		</div>
	</body>
</html>