<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>transform：css3.0新标准中的一些属性</title>
<style type="text/css">
.menu ul {
border-top: 2px solid #f5f5f5; padding: 0 10px;
margin: 0;
}
.menu ul li {
padding: 0; margin: 0; list-style: none;
}
.menu ul li a{
color: #fff; float: left; margin: 0 5px; font-size: 14px; width: 65px;
height: 50px; line-height: 50px; text-align: center; padding: 10px 5px; background: #151515;
border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px;
box-shadow: 0 0 1px #ccc,inset 0 0 2px #fff; -moz-box-shadow: 0 0 1px #ccc,inset 0 0 2px #fff; -webkit-box-shadow: 0 0 1px #ccc,inset 0 0 2px #fff;
text-shadow: 0 1px 1px #686868;
text-decoration: none;
}
.menu ul li.translate a{
background: #2EC7D2;
}
.menu ul li.translate-x a {
background: #8FDD21;
}
.menu ul li.translate-y a {
background: #F45917;
}
.menu ul li.rotate a {
background: #D50E19;
}
.menu ul li.scale a {
background: #cdddf2;
}
.menu ul li.scale-x a {
background: #0fDD21;
}
.menu ul li.scale-y a {
background: #cd5917;
}
.menu ul li.skew a {
background: #519;
}
.menu ul li.skew-x a {
background: #D50;
}
.menu ul li.skew-y a {
background: #E19;
}
.menu ul li.matrix a {
background: #919;
}
/* x-轴偏移*/
.menu ul li.translate-x a:hover {
-moz-transform: translateX(-10px);
-webkit-transform: translateX(-10px);
-o-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
}
/* y-轴偏移*/
.menu ul li.translate-y a:hover {
-moz-transform: translateY(-10px);
-webkit-transform: translateY(-10px);
-o-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
/* x/y 轴都偏移*/
.menu ul li a:hover {
-moz-transform: translate(-10px,-10px);
-webkit-transform: translate(-10px,-10px);
-o-transform: translate(-10px,-10px);
-ms-transform: translate(-10px, -10px);
transform: translate(-10px,-10px);
}
/* 角度旋转 */
.menu ul li.rotate a:hover {
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/* 缩放 缩放都是以原元素中心点为参考点的 */
.menu ul li.scale a:hover {
-moz-transform: scale(0.8,0.8);
-webkit-transform: scale(0.8,0.8);
-o-transform: scale(0.8,0.8);
-ms-transform: scale(0.8,0.8);
transform: scale(0.8,0.8);
}
.menu ul li.scale-x a:hover {
-moz-transform: scaleX(0.8);
-webkit-transform: scaleX(0.8);
-o-transform: scaleX(0.8);
-ms-transform: scaleX(0.8);
transform: scaleX(0.8);
}
.menu ul li.scale-y a:hover {
-moz-transform: scaleY(1.2);
-webkit-transform: scaleY(1.2);
-o-transform: scaleY(1.2);
-ms-transform: scaleY(1.2);
transform: scaleY(1.2);
}
/* 旋转 */
.menu ul li.skew a:hover {
-moz-transform: skew(45deg,15deg);
-webkit-transform: skew(45deg,15deg);
-o-transform: skew(45deg,15deg);
-ms-transform: skew(45deg,15deg);
transform: skew(45deg,15deg);
}
/** transform:skewX(x) */
.menu ul li.skew-x a:hover {
-moz-transform: skewX(-30deg);
-webkit-transform: skewX(-30deg);
-o-transform: skewX(-30deg);
-ms-transform: skewX(-30deg);
transform: skewX(-30deg);
}
/** transform:skewY(y) */
.menu ul li.skew-y a:hover {
-moz-transform: skewY(30deg);
-webkit-transform: skewY(30deg);
-o-transform: skewY(30deg);
-ms-transform: skewY(30deg);
transform: skewY(30deg);
}
.menu ul li.matrix a:hover {
-moz-transform: matrix(1,1,-1,0,0,0);
-webkit-transform: matrix(1,1,-1,0,0,0);
-o-transform: matrix(1,1,-1,0,0,0);
-ms-transform: matrix(1,1,-1,0,0,0);
transform: matrix(1,1,-1,0,0,0);
}
</style>
</head>
<body>
<div class="menu">
<ul class="clearfix">
<li class="item translate"><a href="#">Translate</a></li>
<li class="item translate-x"><a href="#">TranslateX</a></li>
<li class="item translate-y"><a href="#">TranslateY</a></li>
<li class="item rotate"><a href="#">Rotate</a></li>
<li class="item scale"><a href="#">Scale</a></li>
<li class="item scale-x"><a href="#">ScaleX</a></li>
<li class="item scale-y"><a href="#">ScaleY</a></li>
<li class="item skew"><a href="#">Skew</a></li>
<li class="item skew-x"><a href="#">SkewX</a></li>
<li class="item skew-y"><a href="#">SkewY</a></li>
<li class="item matrix"><a href="#">Matrix</a></li>
</ul>
</div>
</body>
</html>
相关推荐
3. **边框和边距**：CSS3.0允许边框使用圆角 (`border-radius`)，甚至创建带有径向渐变的边框。`box-sizing`属性改变元素的盒模型，使开发者可以更容易地控制元素尺寸。此外，`calc()`函数可用于动态计算边距和宽度...
Flexbox（弹性盒布局）和Grid（网格布局）是CSS3.0中的两种全新的布局模型。Flexbox解决了复杂的单轴布局问题，而Grid则提供了二维布局解决方案，让网页布局设计更为灵活和强大。 **八、颜色与透明度** 新增的RGBA...
这份CSS3.0参考手册.chm文件包含了所有这些特性的详细介绍，包括语法、示例和兼容性信息，是学习和使用CSS3的重要资源。通过深入学习，开发者能够创建更加动态、响应且富有吸引力的网页，提升用户体验。同时，了解...
至于压缩包中的“梦网平台Webservice接口说明.doc”，这似乎是一个关于梦网平台的Web服务接口文档，可能详细介绍了如何使用CSS3.0来美化和增强这些接口的用户界面。通常，这类文档会包含接口的描述、调用方法、...
总的来说，"CSS 3.0 中文参考手册"是学习和提升CSS技能的理想资源，尤其对于中文使用者，它提供了一条清晰的学习路径，使你能够掌握这个强大的样式语言，并在实际项目中实现富有创意和功能性的Web设计。
4. **通配符选择器**：`*`用于选择所有元素，但CSS3.0中可以结合其他选择器使用，以提高效率。 5. **层叠上下文**：CSS3引入了更复杂的选择器层叠规则，使得样式冲突得到更好的解决。 **二、模块化发展** CSS3.0...
CSS 3.0增加了绝对定位的`transform`、`transition`和`animation`属性，使得元素动态效果和3D转换变得更加容易。此外，还引入了Flexbox和Grid布局，这两种布局模型提供了更高效、更灵活的二维布局方案。 **8. 颜色...
CSS3.0的`transform`属性允许元素进行2D和3D变换，如旋转（`rotate`）、缩放（`scale`）、位移（`translate`）等。配合`transition`可以实现平滑的过渡效果，而`animation`则能创建复杂的动画序列。 **六、媒体查询...
《CSS3.0与CSS2.0详尽手册》涵盖了Web设计中不可或缺的CSS（层叠样式表）技术，从基础到高级，为开发者提供了全面的指导。此资源包包括了CSS手册包和《css3.0manual.chm》文件，后者可能是CSS3.0的详细参考手册。 ...
在《CSS3.0参考手册》中，你可以找到关于以下关键知识点的详细讲解： 1. **选择器**：CSS3.0引入了更强大的选择器，如类选择器、ID选择器、属性选择器、伪类和伪元素等，使代码更加精确和高效。例如，`:nth-child()...
在本文中，我们将深入探讨一些CSS3.0的基础知识，包括边框与圆角、过渡效果、背景设置、伪类、文本样式以及盒模型和变换等。 1. **边框与圆角**： CSS3.0允许我们创建圆角边框，这使得元素的边缘更加平滑。例如，`...
2. @font-face 规则：允许在网页中使用自定义字体，提高设计的个性化。 3. 文本阴影：`text-shadow` 添加文本阴影，增强可读性或视觉效果。 4. 文本溢出：`overflow-wrap` 和 `text-overflow` 控制文本溢出时的行为...
6. **文字特效**：CSS3.0支持文字阴影（`text-shadow`）、文字渲染（`text-rendering`）和文字大小写转换（`text-transform`）等，使文字更具吸引力。 7. **响应式设计**：媒体查询（`media queries`）允许我们根据...
媒体查询（media queries）是CSS3.0中的一个重要特性，它使得网页可以适应不同的设备和屏幕尺寸，为移动优先的设计理念提供了强有力的支持。 八、颜色与渐变 CSS3.0支持更丰富的颜色表示，如rgba()、hsl()和hsla()...
在CSS3.0中，选择器得到了显著增强，包括类选择器、ID选择器、属性选择器和伪类选择器等。例如： - `nth-child()` 和 `nth-of-type()` 用于选择特定顺序的元素。 - `:hover`, `:active`, `:focus` 为元素添加交互...
CSS3.0还包含其他许多特性，如`calc()`函数用于动态计算长度值，`rgba()`和`hsla()`用于透明度控制，以及`transform`和`perspective`用于3D转换等。 提供的《CSS3.0帮助手册》（CSS3.0（飘零雾雨版）.chm）是一份...
《CSS3.0手册》是Web开发者不可或缺的重要参考资料，它详细阐述了CSS3.0的各种新特性和使用方法。CSS3.0（层叠样式表第三级）是继CSS2.1之后的一个重要版本，引入了许多增强网页设计功能的新特性，使得网页布局、...
在IT行业中，JavaScript和CSS3.0是网页开发不可或缺的两个关键部分，它们共同作用于网页的动态交互和视觉呈现，创造出引人入胜的用户体验。"javascript+css3.0完美效果实现"这一主题旨在探讨如何巧妙地结合这两者，...
这份《CSS3.0中文手册》覆盖了以上所有内容，详细解释了各个特性的使用方法和示例，是CSS初学者和进阶者必备的参考书籍。通过深入学习，开发者能够充分利用CSS3.0的特性，创建出更加精美、响应式的网页设计。