魅せる!iPhoneサイト
作例5
テキストP.100
トランジションの練習
<ahref="#">ボタン</a>
a{ display:block; color:#fff; width:100px; padding:10px; text-align:center; background:blue; text-decoration:none; transition-property:background,width; transition-duration:1s; transition-timing-function:ease-out; transition-delay:0s; -webkit-transition-property:background,width; -webkit-transition-duration:1s; -webkit-transition-timing-function:ease-out; -webkit-transition-delay:0s; } a:hover{ background:red; width:200px; }
トランジションの練習その2
<body> <ulid="flip"class="profiles cf"> <li> <imgclass="pic"src="img/elizabeth.jpg"alt="Mia" /> <ulclass="info"> <li><ahref="#"title="Angry gorgeus girl in the burning flame">Mia</a></li> <li>xxxxxx@mail.net</li> <li>000 - 00 000 000</li> </ul> </li> <li> <imgclass="pic"src="img/mia.jpg"alt="Chloe" /> <ulclass="info"> <li><ahref="#"title="Fashionable portrait of the young brunette">Chloe</a></li> <li>xxxxxx@mail.net</li> <li>000 - 00 000 000</li> </ul> </li> <li> <imgclass="pic"src="img/ella.jpg"alt="Elizabeth" /> <ulclass="info"> <li><ahref="#"title="Young beautiful girl relaxes ashore">Elizabeth</a></li> <li>xxxxxx@mail.net</li> <li>000 - 00 000 000</li> </ul> </li> <li> <imgclass="pic"src="img/emma.jpg"alt="Ella" /> <ulclass="info"> <li><ahref="#"title="Young girl dancing happy in a field">Ella</a></li> <li>xxxxxx@mail.net</li> <li>000 - 00 000 000</li> </ul> </li> </ul> </body>
/* BASIC RESET */ ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input { margin:0; padding:0; } /* HTML ELEMENTS */ body { background: -moz-radial-gradient(#364D58, #000); background: -webkit-gradient(radial, center center, 10, center center, 1000, from(#364D58), to(#000)); color:#555; background-color:#151f23; font: 13px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; color:#ccc; } #flip { margin-top: 20px; } .profiles, .info { list-style:none; cursor:pointer; /*カーソルを手の形に*/ } .profiles > li { width:150px; height:200px; float:left; margin-right:50px; } .info, .pic { position:absolute; } .info { font-family: 'Lato', sans-serif; color:#fff; font-size:18px; padding:5px; background-color:rgba(55, 168, 80, 0.7); width:140px; height:190px; opacity:0; text-align:right; } .info a { font-weight:bold; font-size:25px; color:#fff; text-decoration:none; } .info a:hover { text-decoration:underline; } .pic { width:150px; height:200px; } /* ここからトランジッション */ #flip{ perspective: 800px; } #flip .info{ transition: all 0.8s; -webkit-transition: all 0.8s; opacity: 1; transform-style: preserve-3d; } #flip .info li{ transform: rotateY(180deg); -webkit-transform: rotateY(180deg); } #flip .pic{ transition: all 0.8s; -webkit-transition: all 0.8s; backface-visibility: hidden; -webkit-backface-visibility: hidden; z-index: 999; transform-style: preserve-3d; } #flip li:hover .info{ transform: rotateY(180deg); -webkit-transform:rotateY(180deg); } #flip li:hover .pic{ transform: rotateY(180deg); -webkit-transform:rotateY(180deg); }