投稿
  1. Web176教程首页
  2. CSS3转换属性

CSS3 transform 属性 | CSS3教程：CSS3 3D转换

terry • • CSS3转换属性 • 阅读 228

返回到：CSS3 3D转换 | CSS3教程

属性定义及使用说明

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

为了更好地理解Transform属性，请查看：

<html><!DOCTYPE html>
<html>
<head>
	<title>Web176教程网(web176.com)</title> 
<style> 
#div1
{
width:120px;
height:100px;
background-color:yellow;
border:1px solid black;
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
</style>

<script>
function rotate(value)
{
document.getElementById('div1').style.webkitTransform="rotate(" + value + "deg)";
document.getElementById('div1').style.msTransform="rotate(" + value + "deg)";
document.getElementById('div1').style.MozTransform="rotate(" + value + "deg)";
document.getElementById('div1').style.OTransform="rotate(" + value + "deg)";
document.getElementById('div1').style.transform="rotate(" + value + "deg)";
document.getElementById('span1').innerHTML=value + "deg";
}
</script>

</head>
<body>

<p>Rotate the yellow div element:</p>

<div id="div1">HELLO</div>

Rotate: <br>
<input type="range" min="-360" max="360" value="7" onchange="rotate(this.value)" /><br>
transform: rotate(<span id="span1">7deg</span>);

</body>
</html>
默认值：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 个值的 4×4 矩阵。
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 转换元素定义透视视图。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性谷歌IE火狐苹果opera
transform (2D)36.0
4.0 -webkit-		10.0
9.0 -ms-		16.0
3.5 -moz-		9.0
3.2 -webkit-		23.0
15.0 -webkit-
10.5 -o-
transform (3D)36.0
12.0 -webkit-		12.010.016.0
10.0 -moz-		9.0
4.0 -webkit-

实例

旋转 div 元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Web176教程网(web176.com)</title> 
<style> 
div
{
	width:200px;
	height:100px;
	background-color:yellow;
	/* Rotate div */
	transform:rotate(7deg);
	-ms-transform:rotate(7deg); /* IE 9 */
	-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
</style>
</head>
<body>

<div>Hello</div>

</body>
</html>

Css3 Transform 各种变形旋转，如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Web176教程网(web176.com)</title> 
<style> 
*, *:after, *:before {
  box-sizing: border-box;
}

body {
  background: #F5F3F4;
  margin: 0;
  padding: 10px;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
}

h1 {
  color: #4c4c4c;
  font-weight: 600;
  border-bottom: 1px solid #ccc;
}

h2, h4 {
  font-weight: 400;
  color: #4d4d4d;
}

.card {
  display: inline-block;
  margin: 10px;
  background: #fff;
  padding: 15px;
  min-width: 200px;
  box-shadow: 0 3px 5px #ddd;
  color: #555;
}
.card .box {
  width: 100px;
  height: 100px;
  margin: auto;
  background: #ddd;
  cursor: pointer;
  box-shadow: 0 0 5px #ccc inset;
}
.card .box .fill {
  width: 100px;
  height: 100px;
  position: relative;
  background: #03A9F4;
  opacity: .5;
  box-shadow: 0 0 5px #ccc;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.card p {
  margin: 25px 0 0;
}

.rotate:hover .fill {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.rotateX:hover .fill {
  -webkit-transform: rotateX(45deg);
  transform: rotateX(45deg);
}

.rotateY:hover .fill {
  -webkit-transform: rotateY(45deg);
  transform: rotateY(45deg);
}

.rotateZ:hover .fill {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.scale:hover .fill {
  -webkit-transform: scale(2, 2);
  transform: scale(2, 2);
}

.scaleX:hover .fill {
  -webkit-transform: scaleX(2);
  transform: scaleX(2);
}

.scaleY:hover .fill {
  -webkit-transform: scaleY(2);
  transform: scaleY(2);
}

.skew:hover .fill {
  -webkit-transform: skew(45deg, 45deg);
  transform: skew(45deg, 45deg);
}

.skewX:hover .fill {
  -webkit-transform: skewX(45deg);
  transform: skewX(45deg);
}

.skewY:hover .fill {
  -webkit-transform: skewY(45deg);
  transform: skewY(45deg);
}

.translate:hover .fill {
  -webkit-transform: translate(45px, 1em);
  transform: translate(45px, 1em);
}

.translateX:hover .fill {
  -webkit-transform: translateX(45px);
  transform: translateX(45px);
}

.translateY:hover .fill {
  -webkit-transform: translateY(45px);
  transform: translateY(45px);
}

.matrix:hover .fill {
  -webkit-transform: matrix(2, 2, 0, 2, 45, 0);
  transform: matrix(2, 2, 0, 2, 45, 0);
}

.perspective-100 .box {
  -webkit-perspective: 100px;
  perspective: 100px;
}

.perspective-200 .box {
  -webkit-perspective: 200px;
  perspective: 200px;
}

.to-100-0-0 {
  -webkit-transform-origin: 100% 0 0;
          transform-origin: 100% 0 0;
}

.to-0-100-0 {
  -webkit-transform-origin: 0 100% 0;
          transform-origin: 0 100% 0;
}
</style>
</head>
<body>

<h1>Css3 Transform</h1>
<!-- Rotate-->
<div class="card">
  <div class="box rotate">
    <div class="fill"></div>
  </div>
  <p>rotate(45deg)  </p>
</div>
<div class="card">
  <div class="box rotateX">
    <div class="fill"></div>
  </div>
  <p>rotateX(45deg)</p>
</div>
<div class="card">
  <div class="box rotateY">
    <div class="fill"></div>
  </div>
  <p>rotateY(45deg)</p>
</div>
<div class="card">
  <div class="box rotateZ">
    <div class="fill"></div>
  </div>
  <p>rotateZ(45deg)  </p>
</div>
<!-- scale-->
<div class="card">
  <div class="box scale">
    <div class="fill"></div>
  </div>
  <p>scale(2)</p>
</div>
<div class="card">
  <div class="box scaleX">
    <div class="fill"></div>
  </div>
  <p>scaleX(2)    </p>
</div>
<div class="card">
  <div class="box scaleY">
    <div class="fill"></div>
  </div>
  <p>scaleY(2)    </p>
</div>
<!-- skew-->
<div class="card">
  <div class="box skew">
    <div class="fill"></div>
  </div>
  <p>skew(45deg, 45deg)  </p>
</div>
<div class="card">
  <div class="box skewX">
    <div class="fill"></div>
  </div>
  <p>skewX(45deg)</p>
</div>
<div class="card">
  <div class="box skewY">
    <div class="fill"></div>
  </div>
  <p>skewY(45deg)</p>
</div>
<!-- translate-->
<div class="card">
  <div class="box translate">
    <div class="fill"></div>
  </div>
  <p>translate(45px)  </p>
</div>
<div class="card">
  <div class="box translateX">
    <div class="fill"></div>
  </div>
  <p>translateX(45px)</p>
</div>
<div class="card">
  <div class="box translateY">
    <div class="fill"></div>
  </div>
  <p>translateY(45px)</p>
</div>
<div class="card">
  <div class="box matrix">
    <div class="fill"></div>
  </div>
  <p> matrix(2, 2, 0, 2, 45, 0)</p>
</div>
<h4>Perspective : 100</h4>
<div class="perspective-100">
  <div class="card">
    <div class="box rotateX">
      <div class="fill"></div>
    </div>
    <p>rotateX(90deg)</p>
  </div>
  <div class="card">
    <div class="box rotateY">
      <div class="fill"></div>
    </div>
    <p>rotateY(45deg)</p>
  </div>
</div>
<h4>Perspective : 200</h4>
<div class="perspective-200">
  <div class="card">
    <div class="box rotateX">
      <div class="fill"></div>
    </div>
    <p>rotateX(90deg)</p>
  </div>
  <div class="card">
    <div class="box rotateY">
      <div class="fill"></div>
    </div>
    <p>rotateY(45deg)</p>
  </div>
</div>
<!-- transform origin-->
<h2>Transform origin</h2>
<div class="card">
  <div class="box rotate">
    <div class="fill to-100-0-0"></div>
  </div>
  <p>transform-origin : 100% 0 0  <br/>rotate(45deg)</p>
</div>
<div class="card">
  <div class="box rotate">
    <div class="fill to-0-100-0"></div>
  </div>
  <p>transform-origin : 0 100%  0<br/>rotate(45deg)</p>
</div>
<div class="card perspective-200">
  <div class="box rotateX">
    <div class="fill to-0-100-0"></div>
  </div>
  <p>transform-origin : 0 100%  0<br/>rotateX(45deg)</p>
</div>
<div class="card perspective-200">
  <div class="box rotateX">
    <div class="fill to-100-0-0"></div>
  </div>
  <p>transform-origin : 100% 0 0<br/>rotateX(45deg)</p>
</div>
<div class="card perspective-200">
  <div class="box rotateY">
    <div class="fill to-0-100-0"></div>
  </div>
  <p>transform-origin : 0 100%  0 <br/>rotateY(45deg)</p>
</div>
<div class="card perspective-200">
  <div class="box rotateY">
    <div class="fill to-100-0-0"></div>
  </div>
  <p>transform-origin : 100%  0 0<br/>rotateY(45deg)</p>
</div>
<div class="card">
  <div class="box scale">
    <div class="fill to-100-0-0"></div>
  </div>
  <p>transform-origin : 100%  0 0<br/>scale(2)</p>
</div>
<div class="card">
  <div class="box scale">
    <div class="fill to-0-100-0"></div>
  </div>
  <p>transform-origin : 0 100%  0<br/>scale(2)</p>
</div>
<div class="card">
  <div class="box scaleX">
    <div class="fill to-100-0-0"></div>
  </div>
  <p>transform-origin : 100%  0 0<br/>scaleX(2)</p>
</div>
<div class="card">
  <div class="box scaleX">
    <div class="fill to-0-100-0"></div>
  </div>
  <p>transform-origin : 0 100%  0<br/>scaleX(2)</p>
</div>
<div class="card">
  <div class="box scaleY">
    <div class="fill to-100-0-0"></div>
  </div>
  <p>transform-origin : 100%  0 0<br/>scaleY(2)</p>
</div>
<div class="card">
  <div class="box scaleY">
    <div class="fill to-0-100-0"></div>
  </div>
  <p>transform-origin : 0 100%  0<br/>scaleY(2)</p>
</div>

</body>
</html>

作者：terry，如若转载，请注明出处：https://www.web176.com/css3transform/5122.html

赞 (0)
打赏 支付宝 支付宝 微信 微信
terryterry
0 0
上一篇 2022年1月14日 下午4:11
下一篇 2022年1月14日 下午4:29

相关推荐

发表回复

登录后才能评论