当鼠标移到图片上时，文字以旋转的方式出现；当鼠标移开时，文字同样以旋转的方式消失，而旋转的方向与出现时相反。
完整HTML代码
少年初成长
先看html代码。
图片盒子是一个DIV标签，其id值是pic。
DIV标签里有一个p标签，p标签内是文字内容。
再看CSS代码。
CSS代码我们主要看一个动画属性transform。#picp{}是默认状态，而#pic:hoverp{}是鼠标悬停时的状态。
默认状态时
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位置移动
定义：
基于原来的位置，沿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位置移动
基于原来的位置,沿X轴平移，长度为x,沿Y轴平移，长度为y,沿Z轴平移，长度为z。