/* firefox & webkit 浏览器中有效 */
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color : #DEE4EE;
color : #305999;
width : 380px;
height : 70px;
line-height : 70px;
font-weight : bold;
text-align : center;
margin : 50px auto;
}
.rotate{
-webkit-transform:rotate(10deg);
-moz-transform:rotate(10deg)
}
.skew{
-webkit-transform:skew(40deg);
-moz-transform:skew(40deg)
}
.scale{
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5)
}
.translate{
-webkit-transform:translate(-100px,-30px);
-moz-transform:translate(-100px,-30px);
}
.animation {
-webkit-transition : all 1s ease-in-out;
-moz-transition : all 1s ease-in-out;
}
.multiple:hover {
-webkit-transform : rotate(360deg) skew(-20deg) scale(3.0) translate(100px,0);
-moz-transform : rotate(360deg) skew(-20deg) scale(3.0) translate(100px,0);
}
</style>
</head>
<body>
<div>transform(base)</div>
<div class="rotate">transform[旋转:rotate(10deg)]</div>
<div class="skew">transform[倾斜:skew(40deg)]</div>
<div class="scale">transform[缩放:scale(1.5)]</div>
<div class="translate">transform[位移:translate(-100px,-30px)]</div>
<div class="animation multiple">transform[animation]</div>
</body>
</html>
[参考:http://www.daqianduan.com/css3-transform/]
相关推荐
在本文中，我们将深入探讨如何使用CSS3的`transform`属性来实现鼠标悬停时的图片过渡动画效果。CSS3的`transform`属性是Web设计领域的一个强大工具，它允许我们对元素进行旋转、缩放、平移和倾斜等操作，从而创造出...
本示例中的"css3 transform属性制作线条的3D爱心动画demo.zip"就是一个利用CSS3的transform属性来创建一个3D爱心动画的实例。这个压缩包包含了一个简单的HTML文件，可以无需任何额外的软件或库，在电脑上直接打开...
本文将深入探讨如何使用CSS3的transform属性来实现“纯css3 transform图片倾斜排列成照片墙效果”。这个效果可以让网页中的图片以各种角度倾斜，形成一种立体、动态的照片展示墙，为用户带来独特的视觉体验。 首先...
在网页设计领域，CSS3（层叠样式表第三版）为开发者提供了许多强大的特性，其中transform属性是一个不可或缺的工具，它允许我们对元素进行二维或三维的变换操作，如旋转、缩放、移动和倾斜。本教程将深入探讨如何...
在CSS3中，`transform`属性是一个非常强大的工具，它允许开发者对元素进行二维或三维空间的变形。在这个“css3 transform属性制作散乱的照片样式代码”示例中，我们将探讨如何利用`transform`属性来创建一种照片散乱...
transform-style属性的使用语法非常简单： CSS Code复制内容到剪贴板 transform-style: flat | preserve-3d 其中flat值为默认值，表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。 也...
此外，还可以考虑使用CSS3的transform属性来添加更多的动态效果，如旋转（rotate）、缩放（scale）等，以增强烟花的视觉冲击力。例如： ```css @keyframes fireworks { /* ... */ 70% { transform: translateY(-...
总结起来，"纯CSS3实现简易3D按钮"是一个展示CSS3强大功能的实例，它利用了CSS3的`transform`、`box-shadow`和`transition`等特性，为网页元素带来了丰富的视觉效果和交互体验。对于开发者来说，掌握这些技术有助于...
本教程将深入探讨“div css3 transform和transition属性鼠标滑过动画效果”，这两个特性是实现动态交互效果的核心。 首先，`transform`属性允许我们对HTML元素进行二维或三维的变换，如旋转、缩放、移动和平移。它...
以上就是使用CSS3实现简单翻牌效果的基本步骤和涉及的技术点。这个效果可以通过调整样式和动画参数来适应各种设计需求，比如创建多张翻牌组成的网格，或者实现更复杂的3D翻转动画。通过深入理解和实践这些CSS3特性，...
【标题】：“纯CSS3实现的3D小球动画在线演示” 在网页设计与开发领域，CSS3（层叠样式表第三版）的引入为设计师和开发者提供了丰富的样式和动画功能，大大增强了网页的视觉效果。本项目标题“纯CSS3实现的3D小球...
本实验将指导大家使用 CSS3 的 transform 属性制作抽奖转盘，整个过程简单又富有乐趣。在实验中，我们将穿插一些思考题，希望大家积极参与并完成思考题，以获得更多的收获。 一、实验内容 本次课程将会教会大家...
CSS3文字特效主要依赖于其新增的属性和功能，如文本阴影(text-shadow)、文本描边(text-stroke)、渐变(gradient)、变换(transform)等。通过这些特性，我们可以创造出丰富多彩的文字展示效果，提升网页的视觉吸引力。 ...
**纯CSS3制作简单的3D动画魔方** 在现代网页设计中，CSS3已经成为不可或缺的一部分，它提供了丰富的样式和强大的功能，其中之一就是3D转换。本教程将介绍如何利用CSS3来创建一个简单的3D动画魔方，无需JavaScript，...
4. **Flexbox布局**：CSS3的Flexbox布局模型使得创建响应式导航菜单变得更加简单，能轻松实现元素的对齐、顺序调整和自适应尺寸。这对于侧边栏导航尤其有用，因为它们需要根据屏幕尺寸变化而灵活调整。 5. **Grid...
本篇将详细讲解如何使用CSS3来创建立体效果，以及如何通过HTML5与CSS3结合实现3D多米诺骨牌图像效果。 首先，理解CSS3的3D转换至关重要。3D转换允许开发者在二维平面上创建出具有深度感的3D视觉效果。主要的3D转换...
在CSS3中，`transform`属性是一个强大的工具，它允许开发者对网页元素进行二维或三维的变形操作，如旋转、平移、缩放和倾斜等。这个属性极大地扩展了Web设计的视觉表现力，同时也提高了用户体验。以下是对`transform...
使用CSS3的3D转换，我们可以为走马灯增加立体感，让用户体验更加生动。 首先，要创建一个3D场景，我们需要使用`transform-style: preserve-3d;`属性。这个属性告诉浏览器在元素及其子元素之间保持3D空间，而非扁平...
使用CSS3实现这一效果，不仅可以提升用户体验，而且可以减少JavaScript的使用，简化前端代码。CSS3中提供的一些关键特性如@keyframes、animation和transform，可以使滚动动画更加流畅和高效。 首先，我们来看一下...