CSS3转换功能transform主要属性值分析及实现分享

发布时间：2023-04-27 11:06:41 作者：佚名

我要评论

css3的到来，让css技术进一步提高了，以前在css2不能实现的功能,现在都可以实现了，例如: 圆角，文字阴影，透明度，渐变，转换，过渡，动画等等。这些功能使用起来很方便

今天我想介绍一下转换的用法：

transform主要包括以下属性值：

rotate(旋转度数)
scale(缩放)
skew(斜切扭曲)
translate(对象平移)

利用上述属性值，可以实现一些很酷的效果，比如正方体，下面是我做的一个效果，三个大小不等的正方体

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>CSS3转换功能(www.jb51.net)</title> 
<script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery-1.7.min.js"></script> 
<style type="text/css"> 
* { 
margin: 0; 
padding: 0; 
list-style: none; 
} 
body { 
padding-top: 100px; 
} 
.box { 
margin: 0 auto 0; 
width: 300px; 
height: 500px; 
position: relative; 
} 
.box .topBox { 
position: absolute; 
width: 300px; 
height: 150px; 
border: 1px solid #ccc; 
top: 0; 
left:107px; 
background-color: yellow; 
-moz-transform: skew(-55deg,0); 
-webkit-transform: skew(-55deg,0); 
-o-transform: skew(-55deg,0); 
font-size: 100px; 
text-align: center; 
} 
.box .topBox02{ 
position: absolute; 
width: 300px; 
height: 260px; 
border: 1px solid #ccc; 
border-top: none; 
top: 152px; 
left: 0; 
background-color: green; 
} 
.box .topBox03{ 
position: absolute; 
width: 214px; 
height: 260px; 
border: 1px solid #ccc; 
border-top: none; 
border-left: none; 
top: 76px; 
left: 302px; 
background-color: blue; 
-moz-transform: skew(0,-35deg); 
-webkit-transform: skew(0,-35deg); 
-o-transform: skew(0,-35deg); 
} 
.box .topBox04 { 
position: absolute; 
width: 300px; 
height: 150px; 
border: 1px solid #ccc; 
top: 260px; 
left:107px; 
-moz-transform: skew(-55deg,0); 
-webkit-transform: skew(-55deg,0); 
-o-transform: skew(-55deg,0); 
} 
.box02 { 
-moz-transform: scale(0.5,0.5) translate(455px,-838px); 
-webkit-transform: scale(0.5,0.5) translate(455px,-838px); 
-o-transform: scale(0.5,0.5) translate(455px,-838px); 
} 
.box03 { 
-moz-transform: scale(0.2,0.2) translate(1671px, -4354px); 
-webkit-transform: scale(0.2,0.2) translate(1671px, -4354px); 
-o-transform: scale(0.2,0.2) translate(1671px, -4354px); 
} 
.box .topBox05 { 
position: absolute; 
width: 300px; 
height: 260px; 
border-left: 1px solid #ccc; 
top: 0; 
left:214px; 
} 
</style> 
</head> 
<body> 
<div class="box"> 
<div class="topBox"></div> 
<div class="topBox02"></div> 
<div class="topBox03"></div> 
<div class="topBox04"></div> 
<div class="topBox05"></div> 
</div> 
<div class="box box02"> 
<div class="topBox"></div> 
<div class="topBox02"></div> 
<div class="topBox03"></div> 
<div class="topBox04"></div> 
<div class="topBox05"></div> 
</div> 
<div class="box box03"> 
<div class="topBox"></div> 
<div class="topBox02"></div> 
<div class="topBox03"></div> 
<div class="topBox04"></div> 
<div class="topBox05"></div> 
</div> 
</body> 
</html>

提示：您可以先修改部分代码再运行

Tag：transform CSS3

利用CSS3的transform做的动态时钟效果
近来HTML5+CSS3，以及相关的游戏开发都很火啊，本人也得跟上时代的脚步，做了一个CSS3的小Demo供大家指点。
2011-09-21
css3 transform 3d 使用html5+css3创建动态旋转的3d立方体
今天向大家介绍如何使用css3创建3d的立方体,操作方法为：上下左右键，实现立方体的翻转旋转效果
2013-01-06
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
在今天的课程中，我将向大家介绍如何使用css3创建3d的立方体,操作方法为：上下左右键，实现立方体的翻转旋转效果，特酷，本人看后，目瞪口呆，值得收藏于参考
2013-01-06
CSS3新属性transition-property transform box-shadow实例学习
本文将为大家介绍下CSS3新属性transition-property transform box-shadow的使用，感兴趣的朋友可以参考下哈，希望对你学习css3有所帮助
2013-06-06
CSS3 transform的skew属性值图文详解
skew(...)的括号里放的是坐标轴旋转的角度，那么就可以知道y轴顺时针转为正，X轴逆时针转为正，需要的朋友可以参考下
2014-07-21
css3 transform属性详解
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
2014-09-30
css3的transform造成z-index无效解决方案
这篇文章主要介绍了css3的transform造成z-index无效解决方案,需要的朋友可以参考下
2014-12-04

CSS3转换功能transform主要属性值分析及实现分享

相关文章

最新评论

文章分类

大家感兴趣的内容

最近更新的内容