The very high level answer is that they protect different things. They're complementary; secure ASP.NET applications use both of them at the same time.
SSL is used to protect the client and the server from an untrusted third party. It provides authentication: the client knows the identity of the server he is talking to. It also provides integrity protection: the client knows the page he's getting actually came from the server instead of an attacker. And it provides confidentiality: nobody can read the credit card number the client sends to the server during checkout.
The <machineKey> element, on the other hand, protects the server from a malicious client. Consider that your server sends me a login cookie that says "levi". What if I change the cookie contents to instead read "amir"? The <machineKey> cryptographic services allow the server to verify that when information like cookies and form fields (__VIEWSTATE, for instance) are round-tripped from server -> client -> server, the client hasn't tampered with the payload in a malicious fashion.