css变形旋转写法_CSS学习

当前位置：网站建设 > 技术支持

css变形旋转写法_CSS学习

资料来源：网络整理时间：2023/3/4 1:23:11 共计：3616 浏览

rotate()旋转：旋转rotate(-30deg)函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。

如果这个值为正值，元素相对原点中心顺时针旋转；

如果这个值为负值，元素相对原点中心逆时针旋转。

用法：transform:rotate(-30deg);

效果：

关于加上浏览器的前缀：

transform:rotate(-30deg);

-webkit-transform:rotate(-30deg);

-moz-transform:rotate(-30deg);

-o-transform:rotate(-30deg);

-mz-transform:rotate(-30deg);

为什么要加前缀？

css标准中各个属性都要经历从草案到定稿的过程，css3中的属性进展都不一样。浏览器厂商在标准尚未明确情况下提前支持会有风险，而且各个浏览器对CSS3的支持也不同，所以每种浏览器使用了自己的私有前缀与标准进行区分，当标准确立后，各大浏览器将逐步支持不带前缀的css3新属性。

目前已有很多私有前缀可以不写了，但为了兼容老版本的浏览器，可以仍沿用私有前缀和标准方法，逐渐过渡。

前缀浏览器

-webkit chrome和safari

-moz firefox

-mz IE

-o opera

注意：IE9版本以下不支持，所以就算加上前缀也是没用的。Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。

Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器，是跨平台浏览器可以在Windows、Mac和Linux三个操作系统平台上运行。

html

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>01变形--旋转 rotate()</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>

<body>
    <div class="wrapper">
      <div><span>哈哈，旋转旋转(^_^)</span></div>
    </div>
</body>
</html>

css

@charset "utf-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
}
.wrapper {
	margin: 100px auto;
	width: 300px;
	height: 200px;
	border: 2px dotted #0F0;
}
.wrapper div {
	width: 300px;
	height: 200px;
	line-height: 200px;
	text-align: center;
	background: #093;
	color: #fff;
	font-size:20px;
	transform:rotate(-30deg);
	-webkit-transform:rotate(-30deg);
	-moz--transform:rotate(-30deg);
	-o-transform:rotate(-30deg);
	-mz-transform:rotate(-30deg);
	/*为什么要加前缀 ？
	css标准中各个属性都要经历从草案到定稿的过程，
	css3中的属性进展都不一样。浏览器厂商在标准尚未
	明确情况下提前支持会有风险，而且各个浏览器对CSS3的支持
	也不同，所以每种浏览器使用了自己的私有前缀与标准进行区分，
	当标准确立后，各大浏览器将逐步支持不带前缀的css3新属性
	
	目前已有很多私有前缀可以不写了，但为了兼容老版本的浏览器，可以仍沿用私有前缀和标准方法，逐渐过渡。
		*/
	/*    前缀          浏览器
		-webkit  		chrome和safari
		-moz            firefox
		-mz             IE
		-o               opera
		注意：IE9版本以下不支持，所以就算加上前缀也是没用的。
	*/
}
/*.wrapper span {
	display: block;
	-webkit-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	transform: rotate(30deg);
}*/

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：Flex 布局语法教程_CSS学习 | ·下一条：css3怎样设置元素旋转角度，怎样设置旋转中心点_CSS学习