Spinning Top

Developer

Size

6,037 Kb

Views

32,384

Spinning Top Previews
Spinning Top HTML Codes
Spinning Top CSS Codes

How do I make an spinning top?

What is a spinning top? How do you make a spinning top? This script and codes were developed by Yogev Ahuvia on 11 September 2022, Sunday.

Spinning Top Previews

Spinning Top - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Spinning Top</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background: #222;
}
.sevivon { -moz-transform: rotateX(-35deg) rotateY(-15deg); -ms-transform: rotateX(-35deg) rotateY(-15deg); -webkit-transform: rotateX(-35deg) rotateY(-15deg); transform: rotateX(-35deg) rotateY(-15deg); -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; animation: sovsovsov 1.5s linear infinite; width: 140px; height: 140px; margin: 0 auto; top: 50px;
}
.handle { -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -moz-transform: translateX(52.5px); -ms-transform: translateX(52.5px); -webkit-transform: translateX(52.5px); transform: translateX(52.5px); position: relative; width: 35px; height: 35px;
}
.handle > .side { -moz-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; width: 35px; height: 35px; position: absolute; top: 0; left: 0;
}
.handle > .side:nth-child(1) { -moz-transform: translateZ(17.5px); -ms-transform: translateZ(17.5px); -webkit-transform: translateZ(17.5px); transform: translateZ(17.5px); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdhYmNmZiIvPjxzdG9wIG9mZnNldD0iNDQlIiBzdG9wLWNvbG9yPSIjNjBhYmY4Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNDA5NmVlIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7abcff), color-stop(44%, #60abf8), color-stop(100%, #4096ee)); background-image: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); background-image: -webkit-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); background-image: linear-gradient(to bottom, #7abcff 0%, #60abf8 44%, #4096ee 100%);
}
.handle > .side:nth-child(2) { -moz-transform: rotateY(180deg) translateZ(17.5px); -ms-transform: rotateY(180deg) translateZ(17.5px); -webkit-transform: rotateY(180deg) translateZ(17.5px); transform: rotateY(180deg) translateZ(17.5px); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E3N2JmZiIvPjxzdG9wIG9mZnNldD0iNDQlIiBzdG9wLWNvbG9yPSIjOTM2MGY4Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjN2E0MGVlIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a77bff), color-stop(44%, #9360f8), color-stop(100%, #7a40ee)); background-image: -moz-linear-gradient(top, #a77bff 0%, #9360f8 44%, #7a40ee 100%); background-image: -webkit-linear-gradient(top, #a77bff 0%, #9360f8 44%, #7a40ee 100%); background-image: linear-gradient(to bottom, #a77bff 0%, #9360f8 44%, #7a40ee 100%);
}
.handle > .side:nth-child(3) { -moz-transform: rotateX(90deg) translateZ(17.5px); -ms-transform: rotateX(90deg) translateZ(17.5px); -webkit-transform: rotateX(90deg) translateZ(17.5px); transform: rotateX(90deg) translateZ(17.5px); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmN2JhZSIvPjxzdG9wIG9mZnNldD0iNDQlIiBzdG9wLWNvbG9yPSIjZjg2MDlhIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZWU0MDgzIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff7bae), color-stop(44%, #f8609a), color-stop(100%, #ee4083)); background-image: -moz-linear-gradient(top, #ff7bae 0%, #f8609a 44%, #ee4083 100%); background-image: -webkit-linear-gradient(top, #ff7bae 0%, #f8609a 44%, #ee4083 100%); background-image: linear-gradient(to bottom, #ff7bae 0%, #f8609a 44%, #ee4083 100%);
}
.handle > .side:nth-child(4) { -moz-transform: rotateY(-90deg) translateZ(17.5px); -ms-transform: rotateY(-90deg) translateZ(17.5px); -webkit-transform: rotateY(-90deg) translateZ(17.5px); transform: rotateY(-90deg) translateZ(17.5px); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdiZmZjMSIvPjxzdG9wIG9mZnNldD0iNDQlIiBzdG9wLWNvbG9yPSIjNjBmOGIxIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNDBlZTlkIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7bffc1), color-stop(44%, #60f8b1), color-stop(100%, #40ee9d)); background-image: -moz-linear-gradient(top, #7bffc1 0%, #60f8b1 44%, #40ee9d 100%); background-image: -webkit-linear-gradient(top, #7bffc1 0%, #60f8b1 44%, #40ee9d 100%); background-image: linear-gradient(to bottom, #7bffc1 0%, #60f8b1 44%, #40ee9d 100%);
}
.handle > .side:nth-child(5) { -moz-transform: rotateY(-90deg) translateZ(-17.5px); -ms-transform: rotateY(-90deg) translateZ(-17.5px); -webkit-transform: rotateY(-90deg) translateZ(-17.5px); transform: rotateY(-90deg) translateZ(-17.5px); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmYmQ3YiIvPjxzdG9wIG9mZnNldD0iNDQlIiBzdG9wLWNvbG9yPSIjZjhhYzYwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZWU5NzQwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffbd7b), color-stop(44%, #f8ac60), color-stop(100%, #ee9740)); background-image: -moz-linear-gradient(top, #ffbd7b 0%, #f8ac60 44%, #ee9740 100%); background-image: -webkit-linear-gradient(top, #ffbd7b 0%, #f8ac60 44%, #ee9740 100%); background-image: linear-gradient(to bottom, #ffbd7b 0%, #f8ac60 44%, #ee9740 100%);
}
.cube { -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; width: 140px; height: 140px;
}
.cube > .side { -moz-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; position: absolute; top: 0; left: 0; width: 140px; height: 140px; line-height: 140px; font-size: 70px; text-align: center;
}
.cube > .side:nth-child(1) { -moz-transform: translateZ(70px); -ms-transform: translateZ(70px); -webkit-transform: translateZ(70px); transform: translateZ(70px); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdhYmNmZiIvPjxzdG9wIG9mZnNldD0iNDQlIiBzdG9wLWNvbG9yPSIjNjBhYmY4Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNDA5NmVlIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7abcff), color-stop(44%, #60abf8), color-stop(100%, #4096ee)); background-image: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); background-image: -webkit-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); background-image: linear-gradient(to bottom, #7abcff 0%, #60abf8 44%, #4096ee 100%);
}
.cube > .side:nth-child(2) { -moz-transform: rotateY(180deg) translateZ(70px); -ms-transform: rotateY(180deg) translateZ(70px); -webkit-transform: rotateY(180deg) translateZ(70px); transform: rotateY(180deg) translateZ(70px); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E3N2JmZiIvPjxzdG9wIG9mZnNldD0iNDQlIiBzdG9wLWNvbG9yPSIjOTM2MGY4Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjN2E0MGVlIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a77bff), color-stop(44%, #9360f8), color-stop(100%, #7a40ee)); background-image: -moz-linear-gradient(top, #a77bff 0%, #9360f8 44%, #7a40ee 100%); background-image: -webkit-linear-gradient(top, #a77bff 0%, #9360f8 44%, #7a40ee 100%); background-image: linear-gradient(to bottom, #a77bff 0%, #9360f8 44%, #7a40ee 100%);
}
.cube > .side:nth-child(3) { -moz-transform: rotateX(90deg) translateZ(70px); -ms-transform: rotateX(90deg) translateZ(70px); -webkit-transform: rotateX(90deg) translateZ(70px); transform: rotateX(90deg) translateZ(70px); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmN2JhZSIvPjxzdG9wIG9mZnNldD0iNDQlIiBzdG9wLWNvbG9yPSIjZjg2MDlhIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZWU0MDgzIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff7bae), color-stop(44%, #f8609a), color-stop(100%, #ee4083)); background-image: -moz-linear-gradient(top, #ff7bae 0%, #f8609a 44%, #ee4083 100%); background-image: -webkit-linear-gradient(top, #ff7bae 0%, #f8609a 44%, #ee4083 100%); background-image: linear-gradient(to bottom, #ff7bae 0%, #f8609a 44%, #ee4083 100%);
}
.cube > .side:nth-child(4) { -moz-transform: rotateX(90deg) translateZ(-70px); -ms-transform: rotateX(90deg) translateZ(-70px); -webkit-transform: rotateX(90deg) translateZ(-70px); transform: rotateX(90deg) translateZ(-70px); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q3ZmY3YiIvPjxzdG9wIG9mZnNldD0iNDQlIiBzdG9wLWNvbG9yPSIjY2FmODYwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYmFlZTQwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d7ff7b), color-stop(44%, #caf860), color-stop(100%, #baee40)); background-image: -moz-linear-gradient(top, #d7ff7b 0%, #caf860 44%, #baee40 100%); background-image: -webkit-linear-gradient(top, #d7ff7b 0%, #caf860 44%, #baee40 100%); background-image: linear-gradient(to bottom, #d7ff7b 0%, #caf860 44%, #baee40 100%);
}
.cube > .side:nth-child(5) { -moz-transform: rotateY(-90deg) translateZ(70px); -ms-transform: rotateY(-90deg) translateZ(70px); -webkit-transform: rotateY(-90deg) translateZ(70px); transform: rotateY(-90deg) translateZ(70px); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdiZmZjMSIvPjxzdG9wIG9mZnNldD0iNDQlIiBzdG9wLWNvbG9yPSIjNjBmOGIxIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNDBlZTlkIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7bffc1), color-stop(44%, #60f8b1), color-stop(100%, #40ee9d)); background-image: -moz-linear-gradient(top, #7bffc1 0%, #60f8b1 44%, #40ee9d 100%); background-image: -webkit-linear-gradient(top, #7bffc1 0%, #60f8b1 44%, #40ee9d 100%); background-image: linear-gradient(to bottom, #7bffc1 0%, #60f8b1 44%, #40ee9d 100%);
}
.cube > .side:nth-child(6) { -moz-transform: rotateY(90deg) translateZ(70px); -ms-transform: rotateY(90deg) translateZ(70px); -webkit-transform: rotateY(90deg) translateZ(70px); transform: rotateY(90deg) translateZ(70px); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmYmQ3YiIvPjxzdG9wIG9mZnNldD0iNDQlIiBzdG9wLWNvbG9yPSIjZjhhYzYwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZWU5NzQwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffbd7b), color-stop(44%, #f8ac60), color-stop(100%, #ee9740)); background-image: -moz-linear-gradient(top, #ffbd7b 0%, #f8ac60 44%, #ee9740 100%); background-image: -webkit-linear-gradient(top, #ffbd7b 0%, #f8ac60 44%, #ee9740 100%); background-image: linear-gradient(to bottom, #ffbd7b 0%, #f8ac60 44%, #ee9740 100%);
}
.tip { -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; width: 140px; height: 140px;
}
.tip > .side { -moz-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; top: 0; left: 0; width: 140px; height: 140px; border-left: 70px solid transparent; border-right: 70px solid transparent;
}
.tip > .side:nth-child(1) { -moz-transform: rotateX(-45deg) translateZ(50px) translateY(-50px); -ms-transform: rotateX(-45deg) translateZ(50px) translateY(-50px); -webkit-transform: rotateX(-45deg) translateZ(50px) translateY(-50px); transform: rotateX(-45deg) translateZ(50px) translateY(-50px); border-top: 100px solid #4096ee;
}
.tip > .side:nth-child(2) { -moz-transform: rotateX(45deg) translateZ(-50px) translateY(-50px); -ms-transform: rotateX(45deg) translateZ(-50px) translateY(-50px); -webkit-transform: rotateX(45deg) translateZ(-50px) translateY(-50px); transform: rotateX(45deg) translateZ(-50px) translateY(-50px); border-top: 100px solid #7a40ee;
}
.tip > .side:nth-child(3) { -moz-transform: rotateY(90deg) rotateX(45deg) translateX(-70px); -ms-transform: rotateY(90deg) rotateX(45deg) translateX(-70px); -webkit-transform: rotateY(90deg) rotateX(45deg) translateX(-70px); transform: rotateY(90deg) rotateX(45deg) translateX(-70px); border-top: 100px solid #40ee9d;
}
.tip > .side:nth-child(4) { -moz-transform: rotateY(-90deg) rotateX(45deg) translateX(-70px) translateY(-100px) translateZ(-100px); -ms-transform: rotateY(-90deg) rotateX(45deg) translateX(-70px) translateY(-100px) translateZ(-100px); -webkit-transform: rotateY(-90deg) rotateX(45deg) translateX(-70px) translateY(-100px) translateZ(-100px); transform: rotateY(-90deg) rotateX(45deg) translateX(-70px) translateY(-100px) translateZ(-100px); border-top: 100px solid #ee9740;
}
@keyframes freefall { from { top: -1000px; } to { top: 100px; }
}
@keyframes sovsovsov { from { transform: rotateX(-15deg) rotateY(0deg); } to { transform: rotateX(-15deg) rotateY(360deg); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="sevivon"> <div class="handle"> <div class="side"></div> <div class="side"></div> <div class="side"></div> <div class="side"></div> <div class="side"></div> </div> <div class="cube"> <div class="side"></div> <div class="side"></div> <div class="side"></div> <div class="side"></div> <div class="side"></div> <div class="side"></div> </div> <div class="tip"> <div class="side"></div> <div class="side"></div> <div class="side"></div> <div class="side"></div> </div>
</div>
</body>
</html>

Spinning Top - Script Codes CSS Codes

body { background: #222;
}
.sevivon { -moz-transform: rotateX(-35deg) rotateY(-15deg); -ms-transform: rotateX(-35deg) rotateY(-15deg); -webkit-transform: rotateX(-35deg) rotateY(-15deg); transform: rotateX(-35deg) rotateY(-15deg); -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; animation: sovsovsov 1.5s linear infinite; width: 140px; height: 140px; margin: 0 auto; top: 50px;
}
.handle { -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -moz-transform: translateX(52.5px); -ms-transform: translateX(52.5px); -webkit-transform: translateX(52.5px); transform: translateX(52.5px); position: relative; width: 35px; height: 35px;
}
.handle > .side { -moz-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; width: 35px; height: 35px; position: absolute; top: 0; left: 0;
}
.handle > .side:nth-child(1) { -moz-transform: translateZ(17.5px); -ms-transform: translateZ(17.5px); -webkit-transform: translateZ(17.5px); transform: translateZ(17.5px); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdhYmNmZiIvPjxzdG9wIG9mZnNldD0iNDQlIiBzdG9wLWNvbG9yPSIjNjBhYmY4Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNDA5NmVlIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7abcff), color-stop(44%, #60abf8), color-stop(100%, #4096ee)); background-image: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); background-image: -webkit-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); background-image: linear-gradient(to bottom, #7abcff 0%, #60abf8 44%, #4096ee 100%);
}
.handle > .side:nth-child(2) { -moz-transform: rotateY(180deg) translateZ(17.5px); -ms-transform: rotateY(180deg) translateZ(17.5px); -webkit-transform: rotateY(180deg) translateZ(17.5px); transform: rotateY(180deg) translateZ(17.5px); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E3N2JmZiIvPjxzdG9wIG9mZnNldD0iNDQlIiBzdG9wLWNvbG9yPSIjOTM2MGY4Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjN2E0MGVlIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a77bff), color-stop(44%, #9360f8), color-stop(100%, #7a40ee)); background-image: -moz-linear-gradient(top, #a77bff 0%, #9360f8 44%, #7a40ee 100%); background-image: -webkit-linear-gradient(top, #a77bff 0%, #9360f8 44%, #7a40ee 100%); background-image: linear-gradient(to bottom, #a77bff 0%, #9360f8 44%, #7a40ee 100%);
}
.handle > .side:nth-child(3) { -moz-transform: rotateX(90deg) translateZ(17.5px); -ms-transform: rotateX(90deg) translateZ(17.5px); -webkit-transform: rotateX(90deg) translateZ(17.5px); transform: rotateX(90deg) translateZ(17.5px); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmN2JhZSIvPjxzdG9wIG9mZnNldD0iNDQlIiBzdG9wLWNvbG9yPSIjZjg2MDlhIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZWU0MDgzIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff7bae), color-stop(44%, #f8609a), color-stop(100%, #ee4083)); background-image: -moz-linear-gradient(top, #ff7bae 0%, #f8609a 44%, #ee4083 100%); background-image: -webkit-linear-gradient(top, #ff7bae 0%, #f8609a 44%, #ee4083 100%); background-image: linear-gradient(to bottom, #ff7bae 0%, #f8609a 44%, #ee4083 100%);
}
.handle > .side:nth-child(4) { -moz-transform: rotateY(-90deg) translateZ(17.5px); -ms-transform: rotateY(-90deg) translateZ(17.5px); -webkit-transform: rotateY(-90deg) translateZ(17.5px); transform: rotateY(-90deg) translateZ(17.5px); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdiZmZjMSIvPjxzdG9wIG9mZnNldD0iNDQlIiBzdG9wLWNvbG9yPSIjNjBmOGIxIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNDBlZTlkIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7bffc1), color-stop(44%, #60f8b1), color-stop(100%, #40ee9d)); background-image: -moz-linear-gradient(top, #7bffc1 0%, #60f8b1 44%, #40ee9d 100%); background-image: -webkit-linear-gradient(top, #7bffc1 0%, #60f8b1 44%, #40ee9d 100%); background-image: linear-gradient(to bottom, #7bffc1 0%, #60f8b1 44%, #40ee9d 100%);
}
.handle > .side:nth-child(5) { -moz-transform: rotateY(-90deg) translateZ(-17.5px); -ms-transform: rotateY(-90deg) translateZ(-17.5px); -webkit-transform: rotateY(-90deg) translateZ(-17.5px); transform: rotateY(-90deg) translateZ(-17.5px); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmYmQ3YiIvPjxzdG9wIG9mZnNldD0iNDQlIiBzdG9wLWNvbG9yPSIjZjhhYzYwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZWU5NzQwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffbd7b), color-stop(44%, #f8ac60), color-stop(100%, #ee9740)); background-image: -moz-linear-gradient(top, #ffbd7b 0%, #f8ac60 44%, #ee9740 100%); background-image: -webkit-linear-gradient(top, #ffbd7b 0%, #f8ac60 44%, #ee9740 100%); background-image: linear-gradient(to bottom, #ffbd7b 0%, #f8ac60 44%, #ee9740 100%);
}
.cube { -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; width: 140px; height: 140px;
}
.cube > .side { -moz-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; position: absolute; top: 0; left: 0; width: 140px; height: 140px; line-height: 140px; font-size: 70px; text-align: center;
}
.cube > .side:nth-child(1) { -moz-transform: translateZ(70px); -ms-transform: translateZ(70px); -webkit-transform: translateZ(70px); transform: translateZ(70px); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdhYmNmZiIvPjxzdG9wIG9mZnNldD0iNDQlIiBzdG9wLWNvbG9yPSIjNjBhYmY4Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNDA5NmVlIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7abcff), color-stop(44%, #60abf8), color-stop(100%, #4096ee)); background-image: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); background-image: -webkit-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); background-image: linear-gradient(to bottom, #7abcff 0%, #60abf8 44%, #4096ee 100%);
}
.cube > .side:nth-child(2) { -moz-transform: rotateY(180deg) translateZ(70px); -ms-transform: rotateY(180deg) translateZ(70px); -webkit-transform: rotateY(180deg) translateZ(70px); transform: rotateY(180deg) translateZ(70px); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E3N2JmZiIvPjxzdG9wIG9mZnNldD0iNDQlIiBzdG9wLWNvbG9yPSIjOTM2MGY4Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjN2E0MGVlIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a77bff), color-stop(44%, #9360f8), color-stop(100%, #7a40ee)); background-image: -moz-linear-gradient(top, #a77bff 0%, #9360f8 44%, #7a40ee 100%); background-image: -webkit-linear-gradient(top, #a77bff 0%, #9360f8 44%, #7a40ee 100%); background-image: linear-gradient(to bottom, #a77bff 0%, #9360f8 44%, #7a40ee 100%);
}
.cube > .side:nth-child(3) { -moz-transform: rotateX(90deg) translateZ(70px); -ms-transform: rotateX(90deg) translateZ(70px); -webkit-transform: rotateX(90deg) translateZ(70px); transform: rotateX(90deg) translateZ(70px); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmN2JhZSIvPjxzdG9wIG9mZnNldD0iNDQlIiBzdG9wLWNvbG9yPSIjZjg2MDlhIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZWU0MDgzIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff7bae), color-stop(44%, #f8609a), color-stop(100%, #ee4083)); background-image: -moz-linear-gradient(top, #ff7bae 0%, #f8609a 44%, #ee4083 100%); background-image: -webkit-linear-gradient(top, #ff7bae 0%, #f8609a 44%, #ee4083 100%); background-image: linear-gradient(to bottom, #ff7bae 0%, #f8609a 44%, #ee4083 100%);
}
.cube > .side:nth-child(4) { -moz-transform: rotateX(90deg) translateZ(-70px); -ms-transform: rotateX(90deg) translateZ(-70px); -webkit-transform: rotateX(90deg) translateZ(-70px); transform: rotateX(90deg) translateZ(-70px); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q3ZmY3YiIvPjxzdG9wIG9mZnNldD0iNDQlIiBzdG9wLWNvbG9yPSIjY2FmODYwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYmFlZTQwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d7ff7b), color-stop(44%, #caf860), color-stop(100%, #baee40)); background-image: -moz-linear-gradient(top, #d7ff7b 0%, #caf860 44%, #baee40 100%); background-image: -webkit-linear-gradient(top, #d7ff7b 0%, #caf860 44%, #baee40 100%); background-image: linear-gradient(to bottom, #d7ff7b 0%, #caf860 44%, #baee40 100%);
}
.cube > .side:nth-child(5) { -moz-transform: rotateY(-90deg) translateZ(70px); -ms-transform: rotateY(-90deg) translateZ(70px); -webkit-transform: rotateY(-90deg) translateZ(70px); transform: rotateY(-90deg) translateZ(70px); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdiZmZjMSIvPjxzdG9wIG9mZnNldD0iNDQlIiBzdG9wLWNvbG9yPSIjNjBmOGIxIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNDBlZTlkIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7bffc1), color-stop(44%, #60f8b1), color-stop(100%, #40ee9d)); background-image: -moz-linear-gradient(top, #7bffc1 0%, #60f8b1 44%, #40ee9d 100%); background-image: -webkit-linear-gradient(top, #7bffc1 0%, #60f8b1 44%, #40ee9d 100%); background-image: linear-gradient(to bottom, #7bffc1 0%, #60f8b1 44%, #40ee9d 100%);
}
.cube > .side:nth-child(6) { -moz-transform: rotateY(90deg) translateZ(70px); -ms-transform: rotateY(90deg) translateZ(70px); -webkit-transform: rotateY(90deg) translateZ(70px); transform: rotateY(90deg) translateZ(70px); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmYmQ3YiIvPjxzdG9wIG9mZnNldD0iNDQlIiBzdG9wLWNvbG9yPSIjZjhhYzYwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZWU5NzQwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffbd7b), color-stop(44%, #f8ac60), color-stop(100%, #ee9740)); background-image: -moz-linear-gradient(top, #ffbd7b 0%, #f8ac60 44%, #ee9740 100%); background-image: -webkit-linear-gradient(top, #ffbd7b 0%, #f8ac60 44%, #ee9740 100%); background-image: linear-gradient(to bottom, #ffbd7b 0%, #f8ac60 44%, #ee9740 100%);
}
.tip { -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; width: 140px; height: 140px;
}
.tip > .side { -moz-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; top: 0; left: 0; width: 140px; height: 140px; border-left: 70px solid transparent; border-right: 70px solid transparent;
}
.tip > .side:nth-child(1) { -moz-transform: rotateX(-45deg) translateZ(50px) translateY(-50px); -ms-transform: rotateX(-45deg) translateZ(50px) translateY(-50px); -webkit-transform: rotateX(-45deg) translateZ(50px) translateY(-50px); transform: rotateX(-45deg) translateZ(50px) translateY(-50px); border-top: 100px solid #4096ee;
}
.tip > .side:nth-child(2) { -moz-transform: rotateX(45deg) translateZ(-50px) translateY(-50px); -ms-transform: rotateX(45deg) translateZ(-50px) translateY(-50px); -webkit-transform: rotateX(45deg) translateZ(-50px) translateY(-50px); transform: rotateX(45deg) translateZ(-50px) translateY(-50px); border-top: 100px solid #7a40ee;
}
.tip > .side:nth-child(3) { -moz-transform: rotateY(90deg) rotateX(45deg) translateX(-70px); -ms-transform: rotateY(90deg) rotateX(45deg) translateX(-70px); -webkit-transform: rotateY(90deg) rotateX(45deg) translateX(-70px); transform: rotateY(90deg) rotateX(45deg) translateX(-70px); border-top: 100px solid #40ee9d;
}
.tip > .side:nth-child(4) { -moz-transform: rotateY(-90deg) rotateX(45deg) translateX(-70px) translateY(-100px) translateZ(-100px); -ms-transform: rotateY(-90deg) rotateX(45deg) translateX(-70px) translateY(-100px) translateZ(-100px); -webkit-transform: rotateY(-90deg) rotateX(45deg) translateX(-70px) translateY(-100px) translateZ(-100px); transform: rotateY(-90deg) rotateX(45deg) translateX(-70px) translateY(-100px) translateZ(-100px); border-top: 100px solid #ee9740;
}
@keyframes freefall { from { top: -1000px; } to { top: 100px; }
}
@keyframes sovsovsov { from { transform: rotateX(-15deg) rotateY(0deg); } to { transform: rotateX(-15deg) rotateY(360deg); }
}

Home Page	Home
Developer	Yogev Ahuvia
Username	kindofone
Uploaded	September 11, 2022
Rating	3
Size	6,037 Kb
Views	32,384

Do you need developer help for Spinning Top?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Yogev Ahuvia (kindofone) Script Codes

Name	Size
CSS Only In-Place Translation	3,336 Kb
Live Bricks	7,014 Kb
Living Interfaces - Talk	7,280 Kb
Real-Time Love Meter	5,493 Kb
Reactive CSS Transitions	4,405 Kb
CSS-Only Countdown Clock	5,974 Kb
Thumbnail Animation Effects	10,393 Kb
Playing At Sunset	12,065 Kb
Natural Language Accordion Form	8,426 Kb
A Pen by Yogev Ahuvia	1,941 Kb

Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!

Similar Scripts & Codes

Name	Username	Size
GLSL Hills	Ykob	6,991 Kb
CSS Heart Loaders	Nourabusoud	2,161 Kb
Email Marketing Mock	Kristenzirkler	8,224 Kb
Kut D3	Jellevrswk	3,687 Kb
Sexy Social Buttons	Ipiyale	2,226 Kb
Loading...	Adamjacob	2,384 Kb
CSS3 Diamond	Rendro	1,960 Kb
Simple Buttons	Haydenmills	1,750 Kb
Drag n Drop	Martin42	2,594 Kb
A Pen by utcwebdev	Utcwebdev	2,856 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!