jQuery SmartIt Plugin: CSS3 2D Transformation
CSS3 has some fresh options, a few of which are already adopted by the newest net browsers like Google Chrome, Apple
Safari and Mozilla FireFox. IE doesn’t help a lot of the CSS3 modules, so overlook about IE for the second and see what SmartIt plugin does utilize CSS3 2D transformation module’s rotate transformation.
The SmartIt plugin is created using CSS3 2D transformation; it permits you to rotate and resize any absolute positioned block aspect.
The code to rotate an object is below.
webkittransform: rotate(90deg); -moz-transform: rotate(90deg);
To turn the “Smarted” aspect, use the rotation pictures on every nook. You can rotate the element in a clockwise fashion. Rotation pictures are initially invisible; they turn out once you hover over the “Smarted” aspect.
To resize the element click on wherever contained in the issue and resize it utilizing eight resize handles.
Utilizing Sensible It
In your HTML file add the next in head part.
- Add a reference to newest jQuery script
- Add a reference to smartit.js file
Create an absolute positioned block aspect (div) throughout the physique of your HTML file as provided below.
<div id="smartit" fashion="place: absolute; prime: 50px; left: 30px; width: 500px;
peak: 360px; z-index: -1">
</div>
Additionally, add the next code to your HTML file’s head part.
<script kind="textual content/javascript">
$(doc).prepared(operate() );
</script>
Right here is the whole code for instance above.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.zero Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sensible Object</title>
<script src="jquery-1.four.four.min.js" kind="textual content/javascript"></script>
<script src="smartit.js" kind="textual content/javascript"></script>
<script kind="textual content/javascript">
$(doc).prepared(operate() );
</script>
</head>
<physique>
<div id="smartit" fashion="place: absolute; prime: 50px; left: 30px; width: 500px;
peak: 360px; z-index: -1">
<div fashion="width: 100%; peak: 100%; ">
<img src="1.jpg" width="100%" peak="100%" alt="picture" />
</div>
</div>
</physique>
SmartIt Plugin Review
- Overall
- Feature Availability
- Customization
- Design Quality
- Flexibility
Couldn’t believe its so simple 😛