【CSS3练习】transform 2d变形实例练习
2015-04-28 14:48
671 查看
transform 2d变形实例练习:练习了旋转 倾斜 缩放的功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transform</title> <style> .box{background-color: #000;width: 100px;height: 100px;transition: 2s ease;margin:20px;display: inline-block;} /* 旋转 */ #box:hover{transform:rotate(360deg);} /* X 和 Y 轴的 2D 倾斜转换 */ #box2:hover{transform:skew(45deg,0deg);} /* x y 缩放 */ #box3:hover{transform:scale(2,2);} /* x y 转换 */ #box4:hover{transform:translateX(200px) translateY(200px);} </style> </head> <body> <div class="box" id="box"></div> <div class="box" id="box2"></div> <div class="box" id="box3"></div> <div class="box" id="box4"></div> </body> </html>
相关文章推荐
- CSS3-transform,2D动画实例
- CSS3-transform,2D动画实例
- transform属性——css3变形效果2D
- CSS3 Transform变形(2D转换)
- Html5 css3学习--2D变形
- CSS3中的transform变形
- transform做2d和3d变形(css动画一)
- CSS3中的transform变形
- CSS3的变形transform、过渡transition、动画animation学习
- 实例讲解CSS3中Transform的perspective属性的用法
- css3中的变形(transform)、过渡(transtion)、动画(animation)
- CSS3中的transform变形
- CSS3 2D Transform
- CSS3之Transform(变形)一
- css3 transform实例制作
- CSS3--变形(transform)
- css3 transform 2D转换(动画系列一)
- CSS3之2D变形
- css3的三D效果transform实例
- css3动画属性--transform(变形)