domaine Michelot
¥6800
★★★
.animation { margin:50px 50px 30px; background-color: grey; border-radius:10px; font-size:60px; height: 60px; width: 60px; transition: 1s; cursor: pointer; } .animation:hover{ background-color: silver; border-radius:10px; animation: rotate 1s; animation-iteration-count: infinite; -webkit-animation: rotate 1s; -webkit-animation-iteration-count: infinite; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(720deg); } } @-webkit-keyframes rotate { /* webkit用keyframes */ 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(720deg); } } .figure-inner { position: relative; -webkit-perspective: 1000; perspective: 1000; width: 200px; height: 250px; -webkit-transition: .5s; transition: .5s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .image, figcaption { position: absolute; width: 200px; height: 250px; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .image { z-index: 2; } figcaption { background: darkred; color:white; border: ; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #figure:hover .figure-inner, figcaption { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); z-index:3; } #figure { display: inline-block; width: 200px; height:250px; margin: 0px 30px 20px; padding: 5px 5px 0px 5px; border: none; background: transparent; color: black; font-weight: ; text-align: center; text-decoration: none; line-height: 1; transition: .3s; vertical-align: top; cursor: pointer; } .frame{ display: inline-block; padding: 4px; background: #fff; border: 0px solid black; width: 175px; height:230px; border: 1px solid blue; }