Databases
StackOverflow2013
Postsdbo
POCentering a CSS transform (scale)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCentering a CSS transform (scale)
    text
    copied!<p>I have created a fiddle here, and just wondered how to go about centering the object - so that the heart is centered, and it scales outwards when you hover over it, rather than animating to the lower right.</p> <pre><code>@-webkit-keyframes beat { 0% { -webkit-transform: scale(1); -webkit-filter: drop-shadow(0 0 8px rgba(213, 9, 60, 0.7)); font-size: 90%; color: #cc0404; } 50% { -webkit-transform: scale(1.1); -webkit-filter: drop-shadow(0 0 15px rgba(213, 9, 60, 0.2)); font-size: 120%; color: #e50505; } 100% { -webkit-transform: scale(1); -webkit-filter: drop-shadow(0 0 8px rgba(213, 9, 60, 0.7)); font-size: 90%; color: #cc0404; } } .heart-box { margin: 0 auto; width: 90%; padding-top: 20px; cursor: pointer; font-size: 15em; -webkit-filter: drop-shadow(0 0 0 white); -moz-filter: drop-shadow(0 0 0 white); filter: drop-shadow(0 0 0 white); } .heart { color: #e62020; -webkit-transition: font-size 0.1s ease; -moz-transition: font-size 0.1s ease; transition: font-size 0.1s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; transition: color 0.3s ease; } .heart:hover, .heart:focus { -webkit-animation: beat 0.7s ease 0s infinite normal; -moz-animation: beat 0.7s ease 0s infinite normal; -ms-animation: beat 0.7s ease 0s infinite normal; -o-animation: beat 0.7s ease 0s infinite normal; animation: beat 0.7s ease 0s infinite normal; } </code></pre> <p><a href="http://jsfiddle.net/DBirkett/3DbTn/" rel="nofollow">http://jsfiddle.net/DBirkett/3DbTn/</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload