transform三大属性之rotate(旋转)
·
transform三大属性之rotate
其他:transform三大属性rotate、scale、translate、CSS3 transform-origin属性设置元素旋转起始位置
、菜鸟实例
rotate(angle)定义2D旋转 ——原点为基点
rotateX(angle)X ——X轴为基点
rotateY(angle)Y ——Y轴为基点
transform: rotate3d(x,y,z,angle)定义3d旋转 ——(x,y,z)为基点 +旋转角度
注:x/y/z 取0,1之间的数值,代表元素围绕x/y/z轴的旋转的矢量值,0表示x/y/z轴方向不旋转,1反之,+/-表示方向。
1、transform-orgion: center center ;
2、transform-origion: left top ;
CSS
/* rotate(45deg) */
.rotate:hover .fill {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
/* rotateX(45deg) */
.rotateX:hover .fill {
-webkit-transform: rotateX(45deg);
transform: rotateX(45deg);
}
/* rotateY(45deg) */
.rotateY:hover .fill {
-webkit-transform: rotateY(45deg);
transform: rotateY(45deg);
}
/* rotateZ(45deg) */
.rotateZ:hover .fill {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transform</title>
<style>
body {
background: #F5F3F4;
margin: 0;
padding: 10px;
font-family: 'Open Sans', sans-serif;
text-align: center;
}
.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-color: #ddd;
cursor: pointer;
box-shadow: 0 0 5px #ccc;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
}
.card .box .fill {
width: 100px;
height: 100px;
position: relative;
transform-origin: center;
-webkit-transition: 0.3s;
transition: 0.3s;
background-color: skyblue;
}
/* rotate(45deg) */
.rotate:hover .fill {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
/* rotateX(45deg) */
.rotateX:hover .fill {
-webkit-transform: rotateX(45deg);
transform: rotateX(45deg);
}
/* rotateY(45deg) */
.rotateY:hover .fill {
-webkit-transform: rotateY(45deg);
transform: rotateY(45deg);
}
/* rotateZ(45deg) */
.rotateZ:hover .fill {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
/* transform: rotate3d(x,y,z,angle);*/
/* 角度为整数表示顺时针,角度为负表示逆时针 */
.rotate3d:hover .fill {
-webkit-transform: rotate3d(1, 0, 1, -180deg);
transform: rotate3d(1, 0, 1, -180deg);
}
</style>
</head>
<body>
<!--
transform三大属性:rotate(旋转)
scale(缩放)
translate(移动)
其他属性:skew(扭曲)
matrix(矩阵变形)
语法:transform:rotate | scale | skew | translate |matrix;
一、旋转rotate
rotate(angle)定义2D旋转
rotateX(angle)
rotateY(angle)
rotateZ(angle)
rotate3d(angle)定义3d旋转
-->
<!-- rotate(45deg) -->
<div class="card">
<div class="box rotate">
<div class="fill"></div>
</div>
<p>rotate(45deg)</p>
</div>
<!-- rotateX(45deg) -->
<div class="card">
<div class="box rotateX">
<div class="fill"></div>
</div>
<p>rotateX(45deg)</p>
</div>
<!-- rotateY(45deg) -->
<div class="card">
<div class="box rotateY">
<div class="fill"></div>
</div>
<p>rotateY(45deg)</p>
</div>
<!-- rotateZ(45deg) -->
<div class="card">
<div class="box rotateZ">
<div class="fill"></div>
</div>
<p>rotateZ(45deg)</p>
</div>
</body>
</html>
transform: rotate3d(1, 0, 1, -180deg); 逆时针消失
或 transform: rotate3d(0,1,-1,180deg);
transform: rotate3d(1, 0, 1, 180deg); 顺时针旋转消失
或 transform: rotate3d(0,1,1,180deg);
更多推荐
已为社区贡献4条内容
所有评论(0)