Labels

php (35) javascript (31) phpjavascript (30) jquery (23) html (20) mysql (14) database (9) codeigniter (4) json (4) bar chart (2) calendar (2) column chart (2) framework (2) google maps (2) query (2) tables (2) url (2) dropdown (1)

Tuesday, May 29, 2018

Animated 3D Cube Using HTML CSS JAVASCRIPT

Animated 3D Cube Using HTML CSS JAVASCRIPT


<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<title>CSS3 3D Cube</title>
<style>
body{line-height:1}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
a, a:visited {
color: #0101d0;
font-weight: bold;
cursor: pointer;
font-size: 20px;
font-family: arial;
line-height: 20px;
display: inline-block;
padding: 10px;
}
a:hover {
color: #000;
}
#wrapD3Cube {
width: 250px;
height: 213px;
margin: 20px auto;
background-color: #EEE;
}
#D3Cube {
width: 112px;
height: 112px;
top: 50px;
transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
-moz-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
-webkit-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
margin: auto;
position: relative;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#D3Cube > div {
position: absolute;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
width: 112px;
height: 112px;
float: left;
overflow: hidden;
opacity: 0.85;
}
#side1 {
transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px);
-moz-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px);
-webkit-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px);
background-color: #ff0000;
}
#side2 {
transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px);
-moz-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px);
-webkit-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px);
background-color: #4d0000;
}
#side3 {
transform: translateX(0px) translateY(0px) translateZ(56px);
-moz-transform: translateX(0px) translateY(0px) translateZ(56px);
-webkit-transform: translateX(0px) translateY(0px) translateZ(56px);
background-color: #006600;
}
#side4 {
transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px);
-moz-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px);
-webkit-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px);
background-color: #000066;
}
#side5 {
transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px);
-moz-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px);
-webkit-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px);
background-color: #602020;
}
#side6 {
transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px);
-moz-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px);
-webkit-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px);
background-color: #3399ff;
}
</style>
</head>
<body>
<div id="wrapD3Cube">
<div id="D3Cube">
<div id="side1"></div>
<div id="side2"></div>
<div id="side3"></div>
<div id="side4"></div>
<div id="side5"></div>
<div id="side6"></div>
</div>
</div>
<p style="text-align: center;">
<a onclick="turnLeft()">Left</a>
<a onclick="turnRight()">Right</a> <br />
<a onclick="flipCube()">Flip</a>
</p>
</body>
<script>
var cubex = -22, // initial rotation
cubey = -38,
cubez = 0;
function rotate(variableName, degrees) {
window[variableName] = window[variableName] + degrees;
rotCube(cubex, cubey, cubez);
}
function rotCube(degx, degy, degz){
segs = "rotateX("+degx+"deg) rotateY("+degy+"deg) rotateZ("+degz+"deg) translateX(0) translateY(0) translateZ(0)";
$('#D3Cube').css({"transform":segs});
}
function turnRight() {
rotate("cubey", 90);
}
function turnLeft() {
rotate("cubey", -90);
}
function flipCube() {
rotate("cubez", -180);
}
</script>
</html>

Result






Monday, May 28, 2018

Download file with speed limit using PHP

Here we are explaining about how to limit speed for the file download operation.


<?php
// File form server
$local_file = 'user.php';

// filename that the user gets as default
$download_file = 'myFile.php';

// set the download rate limit (=> 10 kb/s)
$download_rate = 10;

if(file_exists($local_file) && is_file($local_file)) {

    // send headers
    header('Cache-control: private');
    header('Content-Type: application/octet-stream');
    header('Content-Length: '.filesize($local_file));
    header('Content-Disposition: filename='.$download_file);

    // flush content
    flush();

    // open file stream
    $file = fopen($local_file, "r");

    while (!feof($file)) {

        // send the current file part to the browser
        print fread($file, round($download_rate * 10));

        // flush the content to the browser
        flush();

        // sleep one second
        sleep(1);
    }

    // close file stream
    fclose($file);
}
else {
    die('Error: The file '.$local_file.' does not exist!');
}
?>

For more:

Unknown Features
Beautiful Designs
Security Features

More Posts

FOLLOW