CSS3效果3D

HTML5学习 admin 473浏览

3D效果:CSS3允许您使用3D转换来对元素进行格式化

浏览器支持:Internet Explorer 10、Firefox以及Opera支持transform属性,Chrome和Safari需要前缀-webkit-,Internet Explorer9需要前缀-ms,属性:rotateX(),rotateY()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 300px;
				height: 200px;
				background-color: #f00;
				border: 1px solid #0f0;
				
				transform: rotateX(120deg);
				-webkit-transform: rotateX(120deg);
				
/* 				transform: rotateY(120deg);
				-webkit-transform: rotateY(120deg); */
			}
		</style>
	</head>
	<body>
		<div>
			Vue.js 无疑是前端最热门的框架之一,而 Vue.js 最精髓的,正是它的组件。写一个 Vue 工程,也就是在写一个个的组件。换言之,学好了 Vue.js 的组件,也就能很好地驾驭 Vue.js 框架和千变万化的复杂业务场景。
		</div>
	</body>
</html>

转载请注明:大灰牛博客 » CSS3效果3D