【jQuery】サムネイルにいいねボタンとツイートボタンをつける

最近3DのjQueryプラグインを色々探しているが、
実用的っぽいのを見つけたのでやってみた。

ECサイトのアーカイブページなどですぐにディテイルページにとばすのではなくて
マウスオーバーでソーシャルプラグインなどを出したりする。

まずはベースを作り(下記[ベース参照])
デフォルト表示画像の定義と隠すコンテンツを配置する。

その中に配置してある「.view」(複数可)の直下にある「img」に動的に加工が入る。
具体的には「.view img」が5分割され、「.slice」と「.s1」?「.s5」までが自動的に付与される。

それらにcssプロパティtranslate3dとlinear-gradientでつけておく。

[ベース]

■HTML


&lt;div id="grid" class="main"&gt;
    &lt;div class="view"&gt;
        &lt;div class="view-back"&gt;
            &lt;span&gt;&lt;iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.johnlennon.com%2F&amp;amp;send=false&amp;amp;layout=box_count&amp;amp;width=450&amp;amp;show_faces=true&amp;amp;action=like&amp;amp;colorscheme=light&amp;amp;font&amp;amp;height=90&amp;amp;appId=485267988153181" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:90px;" allowTransparency="true"&gt;&lt;/iframe&gt;&lt;/span&gt;
            &lt;span class="t90"&gt;&lt;a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.johnlennon.com/" data-via="sterfield" data-lang="ja" data-dnt="true"&gt;ツイート&lt;/a&gt;
&lt;script&gt;!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");&lt;/script&gt;&lt;/span&gt;
            &lt;a href="http://www.emimusic.jp/st/johnlennon/"&gt;&amp;rarr;&lt;/a&gt;
        &lt;/div&gt;
        &lt;img src="images/1.jpg" /&gt;
    &lt;/div&gt;
    &lt;div class="view"&gt;
        &lt;div class="view-back"&gt;
            &lt;span&gt;&lt;iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.paulmccartney.com%2Fweb%2Fguest%2Fhome&amp;amp;send=false&amp;amp;layout=box_count&amp;amp;width=450&amp;amp;show_faces=true&amp;amp;action=like&amp;amp;colorscheme=light&amp;amp;font&amp;amp;height=90&amp;amp;appId=485267988153181" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:90px;" allowTransparency="true"&gt;&lt;/iframe&gt;&lt;/span&gt;
            &lt;span class="t90"&gt;&lt;a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.paulmccartney.com/web/guest/home" data-via="sterfield" data-lang="ja" data-dnt="true"&gt;ツイート&lt;/a&gt;
&lt;script&gt;!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");&lt;/script&gt;&lt;/span&gt;
            &lt;a href="http://www.paulmccartney.com/web/guest/home"&gt;&amp;rarr;&lt;/a&gt;
        &lt;/div&gt;
        &lt;img src="images/2.jpg" /&gt;
    &lt;/div&gt;

&lt;/div&gt;
&lt;/div&gt;

</div>

</div>

</div>

</div>

■CSS


.container
{
    width: 900px;
    clear: both;
    overflow: hidden;
    margin: auto;
}

.view
{
    width: 400px;
    height: 400px;
    float: left;
    margin: 10px;
    position: relative;
    border: 8px solid #fff;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.05);
    background: #333;
    -webkit-perspective: 500px;
    -moz-perspective: 500px;
    -o-perspective: 500px;
    -ms-perspective: 500px;
    perspective: 500px;
}

.view .slice
{
    width: 80px;
    height: 100%;
    z-index: 100;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;

    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    -ms-transform-origin: left center;
    transform-origin: left center;

    -webkit-transition: -webkit-transform 150ms ease-in-out;
    -moz-transition: -moz-transform 150ms ease-in-out;
    -o-transition: -o-transform 150ms ease-in-out;
    -ms-transition: -ms-transform 150ms ease-in-out;
    transition: transform 150ms ease-in-out;

}

.view div.view-back
{
    width: 50%;
    height: 100%;
    position: absolute;
    right: 0;
    background: #666;
    z-index: 0;
}

.view-back span
{
    display: bock;
    position: absolute;
    right: 15px;
    top: 15px;
    width: 70px;
    overflow: hidden;
}
.view-back span.t90
{
    top: 90px;
}

.view-back a
{
    display: bock;
    font-size: 18px;
    color: rgba(255,255,255,0.4);
    position: absolute;
    right: 15px;
    bottom: 15px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 22px;
    text-align: center;
    font-weight: 700;
}

.view .s2, 
.view .s3, 
.view .s4, 
.view .s5 {
    -webkit-transform: translate3d(80px,0,0);
    -moz-transform: translate3d(80px,0,0);
    -o-transform: translate3d(80px,0,0);
    -ms-transform: translate3d(80px,0,0);
    transform: translate3d(80px,0,0);
}
.view .s1 {
    background-position: 0px 0px;
}
.view .s2 {
    background-position: -80px 0px;
}
.view .s3 {
    background-position: -160px 0px;
}
.view .s4 {
    background-position: -240px 0px;
}
.view .s5 {
    background-position: -320px 0px;
}

.view .overlay {
    width: 80px;
    height: 100%;
    opacity: 0;
    position: absolute;
    -webkit-transition: opacity 150ms ease-in-out;
    -moz-transition: opacity 150ms ease-in-out;
    -o-transition: opacity 150ms ease-in-out;
    -ms-transition: opacity 150ms ease-in-out;
    transition: opacity 150ms ease-in-out;
}

.view:hover .overlay {
    opacity: 1;
}

.view img {
    position: absolute;
    z-index: 0;
    -webkit-transition: left 0.3s ease-in-out;
    -o-transition: left 0.3s ease-in-out;
    -moz-transition: left 0.3s ease-in-out;
    -ms-transition: left 0.3s ease-in-out;
    transition: left 0.3s ease-in-out;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

.container

{

width: 900px;

clear: both;

overflow: hidden;

margin: auto;

}

.view

{

width: 400px;

height: 400px;

float: left;

margin: 10px;

position: relative;

border: 8px solid #fff;

box-shadow: 1px 1px 2px rgba(0,0,0,0.05);

background: #333;

-webkit-perspective: 500px;

-moz-perspective: 500px;

-o-perspective: 500px;

-ms-perspective: 500px;

perspective: 500px;

}

.view .slice

{

width: 80px;

height: 100%;

z-index: 100;

-webkit-transform-style: preserve-3d;

-moz-transform-style: preserve-3d;

-o-transform-style: preserve-3d;

-ms-transform-style: preserve-3d;

transform-style: preserve-3d;

-webkit-transform-origin: left center;

-moz-transform-origin: left center;

-o-transform-origin: left center;

-ms-transform-origin: left center;

transform-origin: left center;

-webkit-transition: -webkit-transform 150ms ease-in-out;

-moz-transition: -moz-transform 150ms ease-in-out;

-o-transition: -o-transform 150ms ease-in-out;

-ms-transition: -ms-transform 150ms ease-in-out;

transition: transform 150ms ease-in-out;

}

.view div.view-back

{

width: 50%;

height: 100%;

position: absolute;

right: 0;

background: #666;

z-index: 0;

}

.view-back span

{

display: bock;

position: absolute;

right: 15px;

top: 15px;

width: 70px;

overflow: hidden;

}

.view-back span.t90

{

top: 90px;

}

.view-back a

{

display: bock;

font-size: 18px;

color: rgba(255,255,255,0.4);

position: absolute;

right: 15px;

bottom: 15px;

border: 2px solid rgba(255,255,255,0.3);

border-radius: 50%;

width: 30px;

height: 30px;

line-height: 22px;

text-align: center;

font-weight: 700;

}

.view .s2,

.view .s3,

.view .s4,

.view .s5 {

-webkit-transform: translate3d(80px,0,0);

-moz-transform: translate3d(80px,0,0);

-o-transform: translate3d(80px,0,0);

-ms-transform: translate3d(80px,0,0);

transform: translate3d(80px,0,0);

}

.view .s1 {

background-position: 0px 0px;

}

.view .s2 {

background-position: -80px 0px;

}

.view .s3 {

background-position: -160px 0px;

}

.view .s4 {

background-position: -240px 0px;

}

.view .s5 {

background-position: -320px 0px;

}

.view .overlay {

width: 80px;

height: 100%;

opacity: 0;

position: absolute;

-webkit-transition: opacity 150ms ease-in-out;

-moz-transition: opacity 150ms ease-in-out;

-o-transition: opacity 150ms ease-in-out;

-ms-transition: opacity 150ms ease-in-out;

transition: opacity 150ms ease-in-out;

}

.view:hover .overlay {

opacity: 1;

}

.view img {

position: absolute;

z-index: 0;

-webkit-transition: left 0.3s ease-in-out;

-o-transition: left 0.3s ease-in-out;

-moz-transition: left 0.3s ease-in-out;

-ms-transition: left 0.3s ease-in-out;

transition: left 0.3s ease-in-out;

}

■js


$( '#grid' ).hoverfold();

1	$( '#grid' ).hoverfold();

[配置図]

■サンプル1


.view:hover .s2{
    -webkit-transform: translate3d(79px,0,0) rotate3d(0,1,0,-45deg);
    -moz-transform: translate3d(79px,0,0) rotate3d(0,1,0,-45deg);
    -o-transform: translate3d(79px,0,0) rotate3d(0,1,0,-45deg);
    -ms-transform: translate3d(79px,0,0) rotate3d(0,1,0,-45deg);
    transform: translate3d(79px,0,0) rotate3d(0,1,0,-45deg);
}
.view:hover .s3, 
.view:hover .s5{
    -webkit-transform: translate3d(79px,0,0) rotate3d(0,1,0,90deg);
    -moz-transform: translate3d(79px,0,0) rotate3d(0,1,0,90deg);
    -o-transform: translate3d(79px,0,0) rotate3d(0,1,0,90deg);
    -ms-transform: translate3d(79px,0,0) rotate3d(0,1,0,90deg);
    transform: translate3d(79px,0,0) rotate3d(0,1,0,90deg);
}
.view:hover .s4{
    -webkit-transform: translate3d(79px,0,0) rotate3d(0,1,0,-90deg);
    -moz-transform: translate3d(79px,0,0) rotate3d(0,1,0,-90deg);
    -o-transform: translate3d(79px,0,0) rotate3d(0,1,0,-90deg);
    -ms-transform: translate3d(79px,0,0) rotate3d(0,1,0,-90deg);
    transform: translate3d(79px,0,0) rotate3d(0,1,0,-90deg);
}

.view .s1 &gt; .overlay {
    background: -moz-linear-gradient(right, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
    background: -o-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
    background: -ms-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
    background: linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
}

.view .s2 &gt; .overlay {
    background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
    background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
    background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
    background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
}

.view .s3 &gt; .overlay {
    background: -moz-linear-gradient(right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%);
    background: -webkit-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
    background: -o-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
    background: -ms-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
    background: linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
}

.view .s4 &gt; .overlay {
    background: -moz-linear-gradient(left, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
    background: -o-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
    background: -ms-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
    background: linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
}

.view .s5 &gt; .overlay {
    background: -moz-linear-gradient(left, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
    background: -o-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
    background: -ms-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
    background: linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
}

.view:hover .s2{

-webkit-transform: translate3d(79px,0,0) rotate3d(0,1,0,-45deg);

-moz-transform: translate3d(79px,0,0) rotate3d(0,1,0,-45deg);

-o-transform: translate3d(79px,0,0) rotate3d(0,1,0,-45deg);

-ms-transform: translate3d(79px,0,0) rotate3d(0,1,0,-45deg);

transform: translate3d(79px,0,0) rotate3d(0,1,0,-45deg);

}

.view:hover .s3,

.view:hover .s5{

-webkit-transform: translate3d(79px,0,0) rotate3d(0,1,0,90deg);

-moz-transform: translate3d(79px,0,0) rotate3d(0,1,0,90deg);

-o-transform: translate3d(79px,0,0) rotate3d(0,1,0,90deg);

-ms-transform: translate3d(79px,0,0) rotate3d(0,1,0,90deg);

transform: translate3d(79px,0,0) rotate3d(0,1,0,90deg);

}

.view:hover .s4{

-webkit-transform: translate3d(79px,0,0) rotate3d(0,1,0,-90deg);

-moz-transform: translate3d(79px,0,0) rotate3d(0,1,0,-90deg);

-o-transform: translate3d(79px,0,0) rotate3d(0,1,0,-90deg);

-ms-transform: translate3d(79px,0,0) rotate3d(0,1,0,-90deg);

transform: translate3d(79px,0,0) rotate3d(0,1,0,-90deg);

}

.view .s1 > .overlay {

background: -moz-linear-gradient(right, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 100%);

background: -webkit-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);

background: -o-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);

background: -ms-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);

background: linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);

}

.view .s2 > .overlay {

background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);

background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);

background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);

background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);

background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);

}

.view .s3 > .overlay {

background: -moz-linear-gradient(right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%);

background: -webkit-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);

background: -o-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);

background: -ms-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);

background: linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);

}

.view .s4 > .overlay {

background: -moz-linear-gradient(left, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);

background: -webkit-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);

background: -o-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);

background: -ms-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);

background: linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);

}

.view .s5 > .overlay {

background: -moz-linear-gradient(left, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);

background: -webkit-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);

background: -o-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);

background: -ms-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);

background: linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);

}

■サンプル2


.view {
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    -ms-perspective: 800px;
    perspective: 800px;
}
.view:hover .s1{
    -webkit-transition-delay: 200ms;
    -moz-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    -ms-transition-delay: 200ms;
    transition-delay: 200ms;

    -webkit-transform: rotate3d(0,1,0,-3deg);
    -moz-transform: rotate3d(0,1,0,-3deg);
    -o-transform: rotate3d(0,1,0,-3deg);
    -ms-transform: rotate3d(0,1,0,-3deg);
    transform: rotate3d(0,1,0,-3deg);
}
.view:hover .s2{
    -webkit-transition-delay: 150ms;
    -moz-transition-delay: 150ms;
    -o-transition-delay: 150ms;
    -ms-transition-delay: 150ms;
    transition-delay: 150ms;

    -webkit-transform: translate3d(79px,0,0) rotate3d(0,1,0,-10deg);
    -moz-transform: translate3d(79px,0,0) rotate3d(0,1,0,-10deg);
    -o-transform: translate3d(79px,0,0) rotate3d(0,1,0,-10deg);
    -ms-transform: translate3d(79px,0,0) rotate3d(0,1,0,-10deg);
    transform: translate3d(79px,0,0) rotate3d(0,1,0,-10deg);
}
.view:hover .s3{
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    -ms-transition-delay: 100ms;
    transition-delay: 100ms;

    -webkit-transform: translate3d(79px,0,0) rotate3d(0,1,0,-16deg);
    -moz-transform: translate3d(79px,0,0) rotate3d(0,1,0,-16deg);
    -o-transform: translate3d(79px,0,0) rotate3d(0,1,0,-16deg);
    -ms-transform: translate3d(79px,0,0) rotate3d(0,1,0,-16deg);
    transform: translate3d(79px,0,0) rotate3d(0,1,0,-16deg);
}
.view:hover .s4{
    -webkit-transition-delay: 50ms;
    -moz-transition-delay: 50ms;
    -o-transition-delay: 50ms;
    -ms-transition-delay: 50ms;
    transition-delay: 50ms;

    -webkit-transform: translate3d(79px,0,0) rotate3d(0,1,0,-30deg);
    -moz-transform: translate3d(79px,0,0) rotate3d(0,1,0,-30deg);
    -o-transform: translate3d(79px,0,0) rotate3d(0,1,0,-30deg);
    -ms-transform: translate3d(79px,0,0) rotate3d(0,1,0,-30deg);
    transform: translate3d(79px,0,0) rotate3d(0,1,0,-30deg);
}
.view:hover .s5{
    -webkit-transform: translate3d(80px,0,0) rotate3d(0,1,0,-42deg);
    -moz-transform: translate3d(80px,0,0) rotate3d(0,1,0,-42deg);
    -o-transform: translate3d(80px,0,0) rotate3d(0,1,0,-42deg);
    -ms-transform: translate3d(80px,0,0) rotate3d(0,1,0,-42deg);
    transform: translate3d(80px,0,0) rotate3d(0,1,0,-42deg);
}

.view .s4 &gt; .overlay {
    background: -moz-linear-gradient(right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(right, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
    background: -o-linear-gradient(right, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
    background: -ms-linear-gradient(right, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
    background: linear-gradient(right, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
}

.view .s5 &gt; .overlay {
    background: -moz-linear-gradient(left, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
    background: -o-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
    background: -ms-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
    background: linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
}

.view div.view-back{
    background: #0a0a0a;
    background: -moz-linear-gradient(left, #0a0a0a 0%, #666666 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0a0a0a), color-stop(100%,#666666));
    background: -webkit-linear-gradient(left, #0a0a0a 0%,#666666 100%);
    background: -o-linear-gradient(left, #0a0a0a 0%,#666666 100%);
    background: -ms-linear-gradient(left, #0a0a0a 0%,#666666 100%);
    background: linear-gradient(left, #0a0a0a 0%,#666666 100%);
}

.view {

-webkit-perspective: 800px;

-moz-perspective: 800px;

-o-perspective: 800px;

-ms-perspective: 800px;

perspective: 800px;

}

.view:hover .s1{

-webkit-transition-delay: 200ms;

-moz-transition-delay: 200ms;

-o-transition-delay: 200ms;

-ms-transition-delay: 200ms;

transition-delay: 200ms;

-webkit-transform: rotate3d(0,1,0,-3deg);

-moz-transform: rotate3d(0,1,0,-3deg);

-o-transform: rotate3d(0,1,0,-3deg);

-ms-transform: rotate3d(0,1,0,-3deg);

transform: rotate3d(0,1,0,-3deg);

}

.view:hover .s2{

-webkit-transition-delay: 150ms;

-moz-transition-delay: 150ms;

-o-transition-delay: 150ms;

-ms-transition-delay: 150ms;

transition-delay: 150ms;

-webkit-transform: translate3d(79px,0,0) rotate3d(0,1,0,-10deg);

-moz-transform: translate3d(79px,0,0) rotate3d(0,1,0,-10deg);

-o-transform: translate3d(79px,0,0) rotate3d(0,1,0,-10deg);

-ms-transform: translate3d(79px,0,0) rotate3d(0,1,0,-10deg);

transform: translate3d(79px,0,0) rotate3d(0,1,0,-10deg);

}

.view:hover .s3{

-webkit-transition-delay: 100ms;

-moz-transition-delay: 100ms;

-o-transition-delay: 100ms;

-ms-transition-delay: 100ms;

transition-delay: 100ms;

-webkit-transform: translate3d(79px,0,0) rotate3d(0,1,0,-16deg);

-moz-transform: translate3d(79px,0,0) rotate3d(0,1,0,-16deg);

-o-transform: translate3d(79px,0,0) rotate3d(0,1,0,-16deg);

-ms-transform: translate3d(79px,0,0) rotate3d(0,1,0,-16deg);

transform: translate3d(79px,0,0) rotate3d(0,1,0,-16deg);

}

.view:hover .s4{

-webkit-transition-delay: 50ms;

-moz-transition-delay: 50ms;

-o-transition-delay: 50ms;

-ms-transition-delay: 50ms;

transition-delay: 50ms;

-webkit-transform: translate3d(79px,0,0) rotate3d(0,1,0,-30deg);

-moz-transform: translate3d(79px,0,0) rotate3d(0,1,0,-30deg);

-o-transform: translate3d(79px,0,0) rotate3d(0,1,0,-30deg);

-ms-transform: translate3d(79px,0,0) rotate3d(0,1,0,-30deg);

transform: translate3d(79px,0,0) rotate3d(0,1,0,-30deg);

}

.view:hover .s5{

-webkit-transform: translate3d(80px,0,0) rotate3d(0,1,0,-42deg);

-moz-transform: translate3d(80px,0,0) rotate3d(0,1,0,-42deg);

-o-transform: translate3d(80px,0,0) rotate3d(0,1,0,-42deg);

-ms-transform: translate3d(80px,0,0) rotate3d(0,1,0,-42deg);

transform: translate3d(80px,0,0) rotate3d(0,1,0,-42deg);

}

.view .s4 > .overlay {

background: -moz-linear-gradient(right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);

background: -webkit-linear-gradient(right, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);

background: -o-linear-gradient(right, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);

background: -ms-linear-gradient(right, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);

background: linear-gradient(right, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);

}

.view .s5 > .overlay {

background: -moz-linear-gradient(left, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);

background: -webkit-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);

background: -o-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);

background: -ms-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);

background: linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);

}

.view div.view-back{

background: #0a0a0a;

background: -moz-linear-gradient(left, #0a0a0a 0%, #666666 100%);

background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0a0a0a), color-stop(100%,#666666));

background: -webkit-linear-gradient(left, #0a0a0a 0%,#666666 100%);

background: -o-linear-gradient(left, #0a0a0a 0%,#666666 100%);

background: -ms-linear-gradient(left, #0a0a0a 0%,#666666 100%);

background: linear-gradient(left, #0a0a0a 0%,#666666 100%);

}

■サンプル3


.view {
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -o-perspective: 1000px;
    -ms-perspective: 1000px;
    perspective: 1000px;
}

.view:hover .s1{
    -webkit-transform: rotate3d(0,1,0,-55deg);
    -moz-transform: rotate3d(0,1,0,-55deg);
    -o-transform: rotate3d(0,1,0,-55deg);
    -ms-transform: rotate3d(0,1,0,-55deg);
    transform: rotate3d(0,1,0,-55deg);
}

.view:hover .s2,
.view:hover .s5{
    -webkit-transform: translate3d(79px,0,0) rotate3d(0,1,0,20deg);
    -moz-transform: translate3d(79px,0,0) rotate3d(0,1,0,20deg);
    -o-transform: translate3d(79px,0,0) rotate3d(0,1,0,20deg);
    -ms-transform: translate3d(79px,0,0) rotate3d(0,1,0,20deg);
    transform: translate3d(79px,0,0) rotate3d(0,1,0,20deg);
}

.view:hover .s3{
    -webkit-transform: translate3d(79px,0,0) rotate3d(0,1,0,30deg);
    -moz-transform: translate3d(79px,0,0) rotate3d(0,1,0,30deg);
    -o-transform: translate3d(79px,0,0) rotate3d(0,1,0,30deg);
    -ms-transform: translate3d(79px,0,0) rotate3d(0,1,0,30deg);
    transform: translate3d(79px,0,0) rotate3d(0,1,0,30deg);
}

.view:hover .s4{
    -webkit-transform: translate3d(79px,0,0) rotate3d(0,1,0,40deg);
    -moz-transform: translate3d(79px,0,0) rotate3d(0,1,0,40deg);
    -o-transform: translate3d(79px,0,0) rotate3d(0,1,0,40deg);
    -ms-transform: translate3d(79px,0,0) rotate3d(0,1,0,40deg);
    transform: translate3d(79px,0,0) rotate3d(0,1,0,40deg);
}

.view .s1 &gt; .overlay {
    background: -moz-linear-gradient(left, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
    background: -o-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
    background: -ms-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
    background: linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
}

.view .s5 &gt; .overlay {
    background: -moz-linear-gradient(right, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(right, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%);
    background: -o-linear-gradient(right, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%);
    background: -ms-linear-gradient(right, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%);
    background: linear-gradient(right, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%);
}

.view {

-webkit-perspective: 1000px;

-moz-perspective: 1000px;

-o-perspective: 1000px;

-ms-perspective: 1000px;

perspective: 1000px;

}

.view:hover .s1{

-webkit-transform: rotate3d(0,1,0,-55deg);

-moz-transform: rotate3d(0,1,0,-55deg);

-o-transform: rotate3d(0,1,0,-55deg);

-ms-transform: rotate3d(0,1,0,-55deg);

transform: rotate3d(0,1,0,-55deg);

}

.view:hover .s2,

.view:hover .s5{

-webkit-transform: translate3d(79px,0,0) rotate3d(0,1,0,20deg);

-moz-transform: translate3d(79px,0,0) rotate3d(0,1,0,20deg);

-o-transform: translate3d(79px,0,0) rotate3d(0,1,0,20deg);

-ms-transform: translate3d(79px,0,0) rotate3d(0,1,0,20deg);

transform: translate3d(79px,0,0) rotate3d(0,1,0,20deg);

}

.view:hover .s3{

-webkit-transform: translate3d(79px,0,0) rotate3d(0,1,0,30deg);

-moz-transform: translate3d(79px,0,0) rotate3d(0,1,0,30deg);

-o-transform: translate3d(79px,0,0) rotate3d(0,1,0,30deg);

-ms-transform: translate3d(79px,0,0) rotate3d(0,1,0,30deg);

transform: translate3d(79px,0,0) rotate3d(0,1,0,30deg);

}

.view:hover .s4{

-webkit-transform: translate3d(79px,0,0) rotate3d(0,1,0,40deg);

-moz-transform: translate3d(79px,0,0) rotate3d(0,1,0,40deg);

-o-transform: translate3d(79px,0,0) rotate3d(0,1,0,40deg);

-ms-transform: translate3d(79px,0,0) rotate3d(0,1,0,40deg);

transform: translate3d(79px,0,0) rotate3d(0,1,0,40deg);

}

.view .s1 > .overlay {

background: -moz-linear-gradient(left, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);

background: -webkit-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);

background: -o-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);

background: -ms-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);

background: linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);

}

.view .s5 > .overlay {

background: -moz-linear-gradient(right, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);

background: -webkit-linear-gradient(right, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%);

background: -o-linear-gradient(right, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%);

background: -ms-linear-gradient(right, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%);

background: linear-gradient(right, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%);

}

■サンプル4


.view {
    -webkit-perspective: 1050px;
    -moz-perspective: 1050px;
    -o-perspective: 1050px;
    -ms-perspective: 1050px;
    perspective: 1050px;
}

.view div {
    -webkit-transition: all 150ms ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.view:hover .s3{
    -webkit-transform: translate3d(79px,0,0) rotate3d(0,1,0,-55deg);
    -moz-transform: translate3d(79px,0,0) rotate3d(0,1,0,-55deg);
    -o-transform: translate3d(79px,0,0) rotate3d(0,1,0,-55deg);
    -ms-transform: translate3d(79px,0,0) rotate3d(0,1,0,-55deg);
    transform: translate3d(79px,0,0) rotate3d(0,1,0,-55deg);
}

.view:hover .s4{
    -webkit-transform: translate3d(79px,0,0) rotate3d(0,1,0,110deg);
    -moz-transform: translate3d(79px,0,0) rotate3d(0,1,0,110deg);
    -o-transform: translate3d(79px,0,0) rotate3d(0,1,0,110deg);
    -ms-transform: translate3d(79px,0,0) rotate3d(0,1,0,110deg);
    transform: translate3d(79px,0,0) rotate3d(0,1,0,110deg);
}

.view:hover .s5{
    -webkit-transform: translate3d(79px,0,0) rotate3d(0,1,0,-110deg);
    -moz-transform: translate3d(79px,0,0) rotate3d(0,1,0,-110deg);
    -o-transform: translate3d(79px,0,0) rotate3d(0,1,0,-110deg);
    -ms-transform: translate3d(79px,0,0) rotate3d(0,1,0,-110deg);
    transform: translate3d(79px,0,0) rotate3d(0,1,0,-110deg);
}

.view .s2 &gt; .overlay {
    background: -moz-linear-gradient(right, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
    background: -o-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
    background: -ms-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
    background: linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
}

.view .s3 &gt; .overlay {
    background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
    background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
    background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
    background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
}

.view .s4 &gt; .overlay {
    background: -moz-linear-gradient(right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%);
    background: -webkit-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
    background: -o-linear-gradient(right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%);
    background: -ms-linear-gradient(right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%);
    background: linear-gradient(right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%);
}

.view .s5 &gt; .overlay {
    background: -moz-linear-gradient(left, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
    background: -o-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
    background: -ms-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
    background: linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
}

.view div.view-back{
    background: #0a0a0a;
    background: -moz-linear-gradient(left, #0a0a0a 0%, #666666 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0a0a0a), color-stop(100%,#666666));
    background: -webkit-linear-gradient(left, #0a0a0a 0%,#666666 100%);
    background: -o-linear-gradient(left, #0a0a0a 0%,#666666 100%);
    background: -ms-linear-gradient(left, #0a0a0a 0%,#666666 100%);
    background: linear-gradient(left, #0a0a0a 0%,#666666 100%);
}

.view {

-webkit-perspective: 1050px;

-moz-perspective: 1050px;

-o-perspective: 1050px;

-ms-perspective: 1050px;

perspective: 1050px;

}

.view div {

-webkit-transition: all 150ms ease-in-out;

-moz-transition: all 0.3s ease-in-out;

-o-transition: all 0.3s ease-in-out;

-ms-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;

}

.view:hover .s3{

-webkit-transform: translate3d(79px,0,0) rotate3d(0,1,0,-55deg);

-moz-transform: translate3d(79px,0,0) rotate3d(0,1,0,-55deg);

-o-transform: translate3d(79px,0,0) rotate3d(0,1,0,-55deg);

-ms-transform: translate3d(79px,0,0) rotate3d(0,1,0,-55deg);

transform: translate3d(79px,0,0) rotate3d(0,1,0,-55deg);

}

.view:hover .s4{

-webkit-transform: translate3d(79px,0,0) rotate3d(0,1,0,110deg);

-moz-transform: translate3d(79px,0,0) rotate3d(0,1,0,110deg);

-o-transform: translate3d(79px,0,0) rotate3d(0,1,0,110deg);

-ms-transform: translate3d(79px,0,0) rotate3d(0,1,0,110deg);

transform: translate3d(79px,0,0) rotate3d(0,1,0,110deg);

}

.view:hover .s5{

-webkit-transform: translate3d(79px,0,0) rotate3d(0,1,0,-110deg);

-moz-transform: translate3d(79px,0,0) rotate3d(0,1,0,-110deg);

-o-transform: translate3d(79px,0,0) rotate3d(0,1,0,-110deg);

-ms-transform: translate3d(79px,0,0) rotate3d(0,1,0,-110deg);

transform: translate3d(79px,0,0) rotate3d(0,1,0,-110deg);

}

.view .s2 > .overlay {

background: -moz-linear-gradient(right, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 100%);

background: -webkit-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);

background: -o-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);

background: -ms-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);

background: linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);

}

.view .s3 > .overlay {

background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);

background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);

background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);

background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);

background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);

}

.view .s4 > .overlay {

background: -moz-linear-gradient(right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%);

background: -webkit-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);

background: -o-linear-gradient(right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%);

background: -ms-linear-gradient(right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%);

background: linear-gradient(right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%);

}

.view .s5 > .overlay {

background: -moz-linear-gradient(left, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);

background: -webkit-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);

background: -o-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);

background: -ms-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);

background: linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);

}

.view div.view-back{

background: #0a0a0a;

background: -moz-linear-gradient(left, #0a0a0a 0%, #666666 100%);

background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0a0a0a), color-stop(100%,#666666));

background: -webkit-linear-gradient(left, #0a0a0a 0%,#666666 100%);

background: -o-linear-gradient(left, #0a0a0a 0%,#666666 100%);

background: -ms-linear-gradient(left, #0a0a0a 0%,#666666 100%);

background: linear-gradient(left, #0a0a0a 0%,#666666 100%);

}

デザイン役員

WRITER

hoshino

ECのことを中心に書きたいと思います。ネタが無いときはプログラムやデザインのことも書きます。

この著者の記事を見る

PREV小さいサイズの良いバナーのデザインを調べる NEXTフルスクリーンのコンテンツイメージスライダーのjQueryプラグイン

【jQuery】サムネイルにいいねボタンとツイートボタンをつける

Related