Cut and Paste Roll Link

Developer
Bottomline Interactive
Size
2,546 Kb
Views
26,312
  1. Cut and Paste Roll Link Previews
  2. Cut and Paste Roll Link HTML Codes
  3. Cut and Paste Roll Link CSS Codes

How do I make an cut and paste roll link?

What is a cut and paste roll link? How do you make a cut and paste roll link? This script and codes were developed by Bottomline Interactive on 25 September 2022, Sunday.

Cut and Paste Roll Link Previews
IQ Test

Cut and Paste Roll Link - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cut and Paste Roll Link</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <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 { padding: 50px;
}
a:link, a:visited { text-decoration: none; color: #fff; background: firebrick
}
/* ROLL LINKS */
.roll-link { display: inline-block; overflow: hidden; vertical-align: top; -webkit-perspective: 600px; -moz-perspective: 600px; -ms-perspective: 600px; perspective: 600px; -webkit-perspective-origin: 50% 50%; -moz-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; perspective-origin: 50% 50%;
}
.roll-link:hover {text-decoration:none;}
.roll-link span { display: block; position: relative; padding: 10px; -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -ms-transition: all 400ms ease; transition: all 400ms ease; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d;
}
.roll-link:hover span { background: #e93a30; -webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg ); -moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg ); -ms-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg ); transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
}
.roll-link span:after { content: attr(data-title); display: block; position: absolute; left: 0; top: 0; padding: 10px; color: #fff; background: #e93a30; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg ); -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg ); -ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg ); transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <a href="#" class="roll-link"><span data-title="Cut and Paste Roll Link">Cut and Paste Roll Link</span></a>
<br>
<a href="#" class="roll-link"><span data-title="Cut and Paste Roll Link">Cut and Paste Roll Link</span></a>
<br>
<a href="#" class="roll-link"><span data-title="Cut and Paste Roll Link">Cut and Paste Roll Link</span></a> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Cut and Paste Roll Link - Script Codes CSS Codes

body { padding: 50px;
}
a:link, a:visited { text-decoration: none; color: #fff; background: firebrick
}
/* ROLL LINKS */
.roll-link { display: inline-block; overflow: hidden; vertical-align: top; -webkit-perspective: 600px; -moz-perspective: 600px; -ms-perspective: 600px; perspective: 600px; -webkit-perspective-origin: 50% 50%; -moz-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; perspective-origin: 50% 50%;
}
.roll-link:hover {text-decoration:none;}
.roll-link span { display: block; position: relative; padding: 10px; -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -ms-transition: all 400ms ease; transition: all 400ms ease; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d;
}
.roll-link:hover span { background: #e93a30; -webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg ); -moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg ); -ms-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg ); transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
}
.roll-link span:after { content: attr(data-title); display: block; position: absolute; left: 0; top: 0; padding: 10px; color: #fff; background: #e93a30; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg ); -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg ); -ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg ); transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
}
Cut and Paste Roll Link - Script Codes
Cut and Paste Roll Link - Script Codes
Home Page Home
Developer Bottomline Interactive
Username BottomlineInteractive
Uploaded September 25, 2022
Rating 3
Size 2,546 Kb
Views 26,312
Do you need developer help for Cut and Paste Roll Link?

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!

Bottomline Interactive (BottomlineInteractive) Script Codes
Name
Simple round Numbered Styling
Sticky Nav with Scrollto
Glow hover input field
Mouse follow
CSS Page Curl Shadows
Bootstrap Accordion
Custom Animated Select Box
Unusual Underline
Simple Waypoint Example
Show hide list
Create amazing sales emails 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!