Love - Transform and Transition

by Jens Grochtdreis

HTML

<!-- #wrap -->
    <div id="wrap">
        <div id="love"></div>
        
        <div id="image">test</div>
        
    </div>
    <!-- /#wrap -->

CSS

#love {
            width: 200px;
            height: 200px;
            border: 1px solid #999;
            position: relative;
            margin: 10px auto;    
        }
        
        #love:before,
        #love:after {
            position: absolute;
            content: "";
            left: 50px;
            top: 50px;
            width: 50px;
            height: 80px;
            background: red;
            -moz-border-radius: 50px 50px 0 0;
            border-radius: 50px 50px 0 0;
            -webkit-transform: rotate(-45deg);
               -moz-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                 -o-transform: rotate(-45deg);
                    transform: rotate(-45deg);
            -webkit-transform-origin: 0 100%;
               -moz-transform-origin: 0 100%;
                -ms-transform-origin: 0 100%;
                 -o-transform-origin: 0 100%;
                    transform-origin: 0 100%;

-webkit-transition: background-color 2s linear;        
   -moz-transition: background-color 2s linear;        
     -o-transition: background-color 2s linear;        
        transition: background-color 2s linear;        
        }
        #love:after {
            left: 0;
            -webkit-transform: rotate(45deg);
               -moz-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                 -o-transform: rotate(45deg);
                    transform: rotate(45deg);
            -webkit-transform-origin: 100% 100%;
               -moz-transform-origin: 100% 100%;
                -ms-transform-origin: 100% 100%;
                 -o-transform-origin: 100% 100%;
                    transform-origin :100% 100%;
        }    
        
        #love:hover:after, #love:hover:before {background-color: #000;}    
        
        #image {
            color: #fff;
            font-size: 5em;
            margin: 30px auto;
            width: 200px;
            height: 200px;
           ...