CSS3实战开发:手把手教你照片墙实战开发_html/css_WEB-ITnose

在 《CSS3 2D转换技术之translate实战开发》 文章中，我给大家列出了 CSS3 中的2D转换方法：

1. translate() 2. rotate() 3. scale() 4. skew() 5. matrix()

同时对第一个方法 translate()做了非常详尽的介绍，并带领大家实战开发了一个导航条。如果你对translate不了解或不是太熟悉，请阅读我的博文 《CSS3 2D转换技术之translate实战开发》 。

在讲解知识点之前，我先跟大家说明一下，有些程序员会问，为什么我应用了transform后不起作用呢，其实CSS3中的transform是对块级元素或者行内元素才起作用的。

本章我将带领大家一起来探索今天的 照片墙实战开发 吧。好了，废话少说，直接进入今天的主题吧。

rotate，顾名思义，是表示旋转的意思，也就是说，如果我们给一个块元素或一个行内元素应用了rotate之后，它会发生旋转的效果。

语法：

-webkit-transform: rotate(20deg); /*兼容chrome与safari*/-moz-transform: rotate(20deg); /*兼容firefox*/-o-transform: rotate(20deg); /*兼容opera*/-ms-transform: rotate(20deg); /*兼容IE9*/transform: rotate(20deg); /*标准语法*/ 

rotate 方法的参数如果是正数，则表示顺时针旋转；如果是负数，则表示逆时针旋转。

语法讲解完了，我现在手把手教大家开发一个照片墙，效果如下：

ok，根据效果图，我们拆分一下显示区域：一个区域显示木板背景，三个区域显示相应照片。下面就跟着我的一步步的学习吧：

一、 定义显示区域

!DOCTYPE html>                         　　         CSS3 2D转换技术之rotate实战开发        　　实战互联网        
         
                              
那一刻，我在这儿感受世外桃源的安逸
                
作者: 陌上花会开

      
查看更多关于CSS3实战开发:手把手教你照片墙实战开发_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did105420