transform:rotate(7deg);
-ms-transform:rotate(7deg);
-moz-transform:rotate(7deg);
-webkit-transform:rotate(7deg);
-o-transform:rotate(7deg);
定义和用法
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
为了更好地理解 transform 属性，请查看这个
演示
。
|
默认值：
|
none
|
|
继承性：
|
no
|
|
版本：
|
CSS3
|
|
JavaScript 语法：
|
object
.style.transform="rotate(7deg)"
|
transform: none|transform-functions;
|
值
|
描述
|
测试
|
|
none
|
定义不进行转换。
|
测试
|
|
matrix(
n
,
n
,
n
,
n
,
n
,
n
)
|
定义 2D 转换，使用六个值的矩阵。
|
测试
|
|
matrix3d(
n
,
n
,
n
,
n
,
n
,
n
,
n
,
n
,
n
,
n
,
n
,
n
,
n
,
n
,
n
,
n
)
|
定义 3D 转换，使用 16 个值的 4x4 矩阵。
|
|
|
translate(
x
,
y
)
|
定义 2D 转换。
|
测试
|
|
translate3d(
x
,
y
,
z
)
|
定义 3D 转换。
|
|
|
translateX(
x
)
|
定义转换，只是用 X 轴的值。
|
测试
|
|
translateY(
y
)
|
定义转换，只是用 Y 轴的值。
|
测试
|
|
translateZ(
z
)
|
定义 3D 转换，只是用 Z 轴的值。
|
|
|
scale(
x
,
y
)
|
定义 2D 缩放转换。
|
测试
|
|
scale3d(
x
,
y
,
z
)
|
定义 3D 缩放转换。
|
|
|
scaleX(
x
)
|
通过设置 X 轴的值来定义缩放转换。
|
测试
|
|
scaleY(
y
)
|
通过设置 Y 轴的值来定义缩放转换。
|
测试
|
|
scaleZ(
z
)
|
通过设置 Z 轴的值来定义 3D 缩放转换。
|
|
|
rotate(
angle
)
|
定义 2D 旋转，在参数中规定角度。
|
测试
|
|
rotate3d(
x
,
y
,
z
,
angle
)
|
定义 3D 旋转。
|
|
|
rotateX(
angle
)
|
定义沿着 X 轴的 3D 旋转。
|
测试
|
|
rotateY(
angle
)
|
定义沿着 Y 轴的 3D 旋转。
|
测试
|
|
rotateZ(
angle
)
|
定义沿着 Z 轴的 3D 旋转。
|
测试
|
|
skew(
x-angle
,
y-angle
)
|
定义沿着 X 和 Y 轴的 2D 倾斜转换。
|
测试
|
|
skewX(
angle
)
|
定义沿着 X 轴的 2D 倾斜转换。
|
测试
|
|
skewY(
angle
)
|
定义沿着 Y 轴的 2D 倾斜转换。
|
测试
|
|
perspective(
n
)
|
为 3D 转换元素定义透视视图。
|
测试
|
<!DOCTYPE html>
<html>
<head>
<style>
body
{
margin:30px;
background-color:#E9E9E9;
}
div.polaroid
{
width:294px;
padding:10px 10px 20px 10px;
border:1px solid #BFBFBF;
background-color:white;
/* Add box-shadow */
box-shadow:2px 2px 3px #aaaaaa;
}
div.rotate_left
{
float:left;
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
-o-transform:rotate(7deg); /* Opera */
transform:rotate(7deg);
}
div.rotate_right
{
float:left;
-ms-transform:rotate(-8deg); /* IE 9 */
-moz-transform:rotate(-8deg); /* Firefox */
-webkit-transform:rotate(-8deg); /* Safari and Chrome */
-o-transform:rotate(-8deg); /* Opera */
transform:rotate(-8deg);
}
</style>
</head>
<body>
<div class="polaroid rotate_left">
<img src="/i/ballade_dream.jpg" alt="郁金香" width="284" height="213" />
<p class="caption">上海鲜花港的郁金香，花名：Ballade Dream。</p>
</div>
<div class="polaroid rotate_right">
<img src="/i/china_pavilion.jpg" alt="世博中国馆" width="284" height="213" />
<p class="caption">2010年上海世博会，中国馆。</p>
</div>
</body>
</html>
css3
出现之前。我们实现一个对象的一组连续动画须要通过JavaScript或Jquery编写，脚本代码较为复杂；
若须要实现
倾斜
、旋转之类的动画难度将更高（我还没试过用JavaScript或Jquery怎样实现），并且即使能实现预计花的时间代价及维护难度是非常大的，非常多时候仅仅能依靠绘图工具制作此类动画文件；
有时候在想假设不用脚本语言，也不用绘图工作制作动画...
m11,m12,m21.m22是控制角度的复制代码代码如下:
DIV
旋转
属性
的演示body {font-family: "Arial", sans-serif;}#example {position: absolute;border: #09F solid 1px;font-weight: 900;padding: 10px;display: block;width: 500px;height: 4...
用
transform
: skew可以做dom结构如下： 核心是让父元素skew一个角度，再让img skew回来。.pic{
transform
:skew(50deg,0deg);}.pic img{
transform
: skew(-50deg,0deg);}然后利用padding对img进行移动，找好位置。所有代码如下：*{margin:0;padding:0;box-sizing:...
在html中，有时需要使某个
div
上下左右移动，使
div
元素位置产生偏移。本文使用了
css3
的
transform
:translate(X,Y)，和css的相对定位来实现
div
元素的偏移。
一、使用
css3
transform
:translate(X,Y)来偏移元素
①
transform
属性
应用于元素的2D或3D转换，这个
属性
允许你将元素旋转，缩放，移动，
倾斜
等。其基本
属性
如下所示：
-o-
transform
: rotate(45deg);
float: right;
-webkit-
transform
: rotate(45deg); /*Safari 4+,Google Chrome 1+ */
-moz-transfo...
扬帆大鱼您可以使用变换和变换原点来实现。组合各种转换会得到相似的结果。我希望你觉得这对你有帮助。:)有关更简单的转换，请参见这些示例。这有一点：
div
{ width: 300px; height:200px; background-image: url('http://placecage.com/g/300/200'); -webkit-
transform
: pe...
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>
div
左右
倾斜
</title><style> .
div
1{border:1px solid #FF0000;
transform
:rotate(-9deg);-ms-transf...
我已经从我身边试图可能这是帮助你。HTMLCSS.container{width:600px;height:400px;border:1px solid red;overflow:hidden;white-space:nowrap;}.imageWrap{width:300px;display:inline-block;height:500px;position:relative;width:40...
height:200px;
background: #99b4d3;
-webkit-clip-path: polygon(0 0, 76% 0, 24% 100%, 0% 100%);
clip-path: polygon(0 0, 76% 0, 24% 100%, 0% 100%);
</style>
<
div
class="
div
2">&...
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, ini
我在这里搜索过，找不到答案，因此，如果以前曾问过这个问题，我深表歉意。无论如何，即时通讯创建了一个网站，即时通讯使用的效果之一是
倾斜
的
div
效果。但是当我使用转换创建它时，由于某种原因旋转并
倾斜
，这使网站从左向右滚动。香港专业教育学院试图将溢出隐藏在父
div
上，但它随后隐藏了
倾斜
效果。这是我的代码...HTML：CSS：.container{width:100%;position:relative...
