实例分析CSS3 transform: translateY() rotate() rotateY() rotateX()
CSS3动画属性transform，在上一文中，我们学习了《transform: scale() 缩放转换》，本文将通过一个实例来分析如何使用其他的动画属性，如表示平移的translateY()， translateX()等，也有表示旋转的rotate()， rotateY()， rotateX()等。
transform: rotate() 旋转
demodownload
实例说明
当鼠标移到图片上时，文字以旋转的方式出现；当鼠标移开时，文字同样以旋转的方式消失，而旋转的方向与出现时相反。
完整HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#pic {
width: 200px;
height: 250px;
margin: 100px auto;
border: 2px solid gainsboro;
box-shadow: 0 0 8px darkgray;
position: relative;
}
#pic p {
width: 200px;
height: 250px;
background: whitesmoke;
text-align: center;
line-height: 250px;
font-family: "微软雅黑";
opacity: 0;
/*
* 定义初始状态的transform属性
* transition定义变换属性和周期，此处为所有属性，周期2s
*/
transform: translateY(-253px) rotate(130deg) rotateY(-270deg) rotateX(100deg) scale(0.5, 0.5);
transition: all 2s;
}
#pic:hover p {
opacity: 1;
/*
* 定义变换后的状态
*/
transform: translateY(-253px) rotate(0deg) rotateY(0deg) rotateX(0deg) scale(1, 1);
}
</style>
</head>
<body>
<div id="pic">
<img src="1.jpg" width="200" height="250" />
<p>少年初成长</p>
</div>
</body>
</html>
代码分析
先看html代码。
图片盒子是一个DIV标签，其id值是pic。
DIV标签里有一个p标签，p标签内是文字内容。
再看CSS代码。
CSS代码我们主要看一个动画属性transform。#pic p {}是默认状态，而#pic:hover p {}是鼠标悬停时的状态。
默认状态时
transform: translateY(-253px) rotate(130deg) rotateY(-270deg) rotateX(100deg) scale(0.5, 0.5);
鼠标悬停时
transform: translateY(-253px) rotate(0deg) rotateY(0deg) rotateX(0deg) scale(1, 1);
这里我们只需理解几个属性的含义，translateY()， rotate()等，下面逐一介绍。
transform属性：2D位置移动
1.translate(x,y)
定义：
基于原来的位置，沿X轴平移，长度为x，沿Y轴平移，长度为y。
语法：
transform：translate(x,y);
2.translateX(x)
定义：
基于原来的位置，沿X轴平移，长度为x。
语法：
transform：translateX(x);
3.translateY(y)
定义：
基于原来的位置,沿Y轴平移，长度为y。
语法：
transform：translateY(y);
transform属性：3D位置移动
1.translate3d(x,y,z)
定义：
基于原来的位置,沿X轴平移，长度为x,沿Y轴平移，长度为y,沿Z轴平移，长度为z。
语法：
transform：translate3d(x,y,z);
2.translateZ(z)
定义：
基于原来的位置,沿Z轴平移，长度为z。
语法：
transform：translateZ(z);
transform属性：2D旋转
1.rotate(angle)
定义：
以图形的几何中心点为旋转中心，顺时针旋转角度为angle。
语法：
transform：rotate(angle);
2.rotateX(x)
定义：
绕X轴方向旋转，顺时针旋转角度为angle。
语法：
transform：rotateX(x);
3.rotateZ(z)
定义：
绕Y轴方向旋转，顺时针旋转角度为angle。
语法：
transform：rotateZ(z);
transform属性：3D旋转
1.rotate3d(x,y,z,angle)
定义：
同时绕X,Y,Z轴三个方向旋转，顺时针旋转角度为angle。
语法：
transform：rotate3d(x,y,z,angle);
2.rotateZ(z)
定义：
绕Z轴方向旋转，顺时针旋转角度为angle。
语法：
transform：rotateZ(z);
您可能对以下文章也感兴趣
- CSS3 transform: scale() 缩放转换【实例分析演示】
- 纯CSS实现的星光动画背景
- 8款CSS动画背景(飞扬文字/旋转方块/粒子动画/彩色水滴。。。)
- 5款CSS动画背景(滑动对角线/图案无限滚动/灰度三角形/闪烁星星)
- CSS动画背景-流星雨效果
- css滚动星星效果/星空动画背景
- CSS粒子动画背景
- CSS动画背景-对角线颜色渐变
