图片翻转+文字翻转特效







蒙娜丽莎


### Web Designer

Description





/*HTML*/
    div.box
        img[src="..."]
        div.over-layer
            h3
            p
/*CSS*/
.box{
  position:relative;
  perspective: 1000px;
  text-align:center;
}
.box img{
  width:200px;
  height:auto;
  opacity:1;
  transform:translateY(0) rotateX(0);
  transition: all 1s ease-in-out 0s;
}

.box:hover img{
  transform: translateY(-100%) rotateX(90deg);
  transform-origin: center bottom 0;
  opacity:0;
}

.box .over-layer{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  transform: translateY(100%) rotateX(-90deg);
    opacity:0;
  transform-origin:top center;
  transition: all 1s ease-in-out;
}
.box:hover .over-layer{
  transform: translateY(0) rotateX(0);
    opacity:1;
}

侧边栏固定宽度, 主体自适应宽度的等高布局

两列布局实现

方法1, 浮动布局

Sidebar 设置为浮动, Content Body 的 margin 设置为 Sidebar 的宽度

HTML

<div class='sidebar'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class='contentBody'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
`</pre>

### CSS

<pre>`*{
margin:0;
padding:0
}
.sidebar{
float:left;
width: 220px;
background-color: #ccc;
}
.contentBody{
margin-left: 220px;
}
`</pre>

## 方法2, 浮动和负边距

### HTML

<pre>`&lt;div class='sidebar'&gt;
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
&lt;/div&gt;
&lt;div class='contentBody'&gt;
    &lt;div class='contentInner'&gt;
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    &lt;/div&gt;
&lt;/div&gt;
`</pre>

### CSS

<pre>`.sidebar{
float:left;
width: 220px;
margin-right: -100%;
background-color: green;
}
.contentBody{
float:left;
width:100%;
}
.contentInner{
margin-left: 220px;
}
`</pre>

# 等高实现

## Demo1

### HTML

<pre>`&lt;div class='container'&gt;
    &lt;div class='wrapper'&gt;
        &lt;div class='sidebar'&gt;SideBar&lt;/div&gt;
        &lt;div class='content'&gt;Main Content&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
`</pre>

### CSS

<pre>`.container{
background-color:#ccc;
}
.wrapper{
display:inline-block; //保证 wrapper 的最小高度不小于被 float 的 sidebar
border-left: 200px solid #333; //等于 sidebar 宽度
vertical-align:bottom
}
.sidebar{
float:left;
width: 200px;
margin-left: -200px; //等于 wrapper 的 border-left 宽度
}
.sidebar, .content{
min-height: 200px;
height: auto !important;
height:200px;
}
`</pre>

## Demo2

### HTML

<pre>`&lt;div class='container'&gt;
    &lt;div class='sidebar'&gt;SideBar&lt;/div&gt;
    &lt;div class='content'&gt;Main Content&lt;/div&gt;
&lt;/div&gt;
`</pre>

### CSS

<pre>`.sidebar{
background-color:#ccc;
float:left;
width:200px;
margin-bottom:-99999px;
padding-bottom:99999px;
}
.content{
background-color: #eee;
margin-left:200px;
margin-bottom:-99999px;
padding-bottom:99999px;
}
.sidebar, .content{
min-height: 200px;
height:auto!important;
height:200px;
}
`</pre>

## Demo3

### HTML

<pre>`&lt;div class='container'&gt;
    &lt;div class='wrapper'&gt;
        &lt;div class='col1'&gt;Left Col&lt;/div&gt;
        &lt;div class='col2'&gt;Right Col&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
`</pre>

### CSS

<pre>`.container{
float:left;
width:100%;
background:orange;
position:relative;
overflow:hidden;
}
.wrapper{
float:left;
width:100%;
background:green;
position:relative;
left:200px;
}
.col1{
width:200px;
float:left;
position:relative;
margin-left:-200px;
}
.col2{
position:relative;
margin-right:200px;
}
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×