Code Snippet </> Info
Snippet Name: Pure HTML5 CSS3 Right Cube Face Effect
Description: Add a right cube face effect that dramatically expands on mouseover.
Example: View Code Demo
Note:
Author: SnapBuilder <snippets@snapbuilder.com>
Last Modified: 2019-12-09 02:02:32
Language: css
Highlight Mode: css
|
| Copy Codes: Use Free Notepad ++ |
|
Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor
|
|
Copied To Clipboard!
<!DOCTYPE html>
<html>
<head>
<title>HTML5 CSS3 Right Cube Face Effect</title>
<style>
/* Begin HTML5 CSS3 Right Cube Face Effect */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The https://snapbuilder.com Free Public Codes Library == */
/* == NOTICE:Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */
BODY {font-family:verdana,arial,ms sans serif; font-size:90%; color:#000000;}
div {
border:5px solid #e6675e;
height:297px;
margin:50px;
padding:10px;
position:relative;
width:210px;
background:#eee;
background:-webkit-linear-gradient(hsla(0,0%,0%,0), hsla(0,0%,0%,.02)),
hsla(0,0%,95%,1);
background:-moz-linear-gradient(hsla(0,0%,0%,0), hsla(0,0%,0%,.02)),
hsla(0,0%,95%,1);
background:-ms-linear-gradient(hsla(0,0%,0%,0), hsla(0,0%,0%,.02)),
hsla(0,0%,95%,1);
background:-o-linear-gradient(hsla(0,0%,0%,0), hsla(0,0%,0%,.02)),
hsla(0,0%,95%,1);
background:linear-gradient(hsla(0,0%,0%,0), hsla(0,0%,0%,.02)),
hsla(0,0%,95%,1);
-webkit-box-shadow:inset 0 0 25px hsla(0,0%,0%,.1),
2px 2px 2px hsla(0,0%,0%,.15);
-moz-box-shadow:inset 0 0 25px hsla(0,0%,0%,.1),
2px 2px 2px hsla(0,0%,0%,.15);
box-shadow:inset 0 0 25px hsla(0,0%,0%,.1),
2px 2px 2px hsla(0,0%,0%,.15);
}
div:hover {
-webkit-transform:scale(2) translate(50px, 70px);
-moz-transform:scale(2) translate(50px, 70px);
-ms-transform:scale(2) translate(50px, 70px);
-o-transform:scale(2) translate(50px, 70px);
transform:scale(2) translate(50px, 70px);
}
.fold:before {
content:'';
position:absolute;
top:-5px;
left:-5px;
width:0;
height:0;
border-top:15px solid #f6f6f6;
border-left:15px solid #f6f6f6;
border-bottom:15px solid #c4453c;
border-right:15px solid #c4453c;
-webkit-box-shadow:1px 1px 1px hsla(0,0%,0%,.25);
-moz-box-shadow:1px 1px 1px hsla(0,0%,0%,.25);
box-shadow:1px 1px 1px hsla(0,0%,0%,.25);
}
.fold:after {
content:'';
position:absolute;
top:0;
left:0;
width:0;
height:0;
border-top:10px solid #f6f6f6;
border-left:10px solid #f6f6f6;
border-bottom:10px solid #c6c6c6;
border-right:10px solid #c6c6c6;
}
h1 {
border-bottom:1px solid #e6e6e6;
color:#bbb;
font-family:Verdana, Geneva, sans-serif;
font-size:30px;
font-style:italic;
line-height:35px;
padding-bottom:10px;
position:relative;
text-align:center;
}
.smalltext {
color:#bbb;
font-family:Verdana, Geneva, sans-serif;
font-size:7px;
line-height:10px;
padding:10px 0;
}
</style>
</head>
<body>
<h3>HTML5 CSS3 Right Cube Face Effect</h3>
<em>Hover to zoom</em>
<div class="fold">
<h1>Document</h1>
<p class="smalltext">This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose.</p>
<p class="smalltext">This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose.</p>
</div>
<br /><br /><br />
[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_204.html">HTML5 CSS3 Right Cube Face Effect Code Snippet</a> page. ]
</body>
</html>
|
