Home > Developer > Web Develop
The basic properties of animate are described in the previous article, which is about the use of animate and transforms
<! DOCTYPE html>
<meta charset= "UTF-8" >
<TITLE>CSS3 3-dimensional conversion </title>
<style>
*{
padding:0px;
margin:0px;
}
. Box li{
List-style:none;
}
. out{
width:800px;
height:400px;
margin:100px Auto;
position:relative;
/*perspective:1000px;*/
}
. box{
width:800px;
height:100px;
transform-style:preserve-3d;
Position:absolute;
Transform-origin:center Center 25px;
Transition:2s all ease-in-out;
}
. Box li{
Position:absolute;
}
UL Li:nth-of-type (1) {
width:800px;
height:50px;
Top: -50px;
Background-color: #eaeaea;
-webkit-transform-origin:bottom;
-webkit-transform:rotatex ( -90DEG);
}
UL Li:nth-of-type (2) {
height:100px;
width:50px;
Left: -50px;
Background-color: #eaeaea;
-webkit-transform-origin:right;
-webkit-transform:rotatey (90DEG);
}
UL Li:nth-of-type (3) {
height:100px;
width:800px;
-webkit-transform-origin:center;
-webkit-transform:rotatey (180DEG);
Background:url (3d2.jpg) no-repeat;
}
UL Li:nth-of-type (4) {
height:100px;
width:50px;
left:800px;
Background-color: #eaeaea;
-webkit-transform-origin:left;
-webkit-transform:rotatey ( -90DEG);
}
UL Li:nth-of-type (5) {
width:100px;
height:50px;
top:100px;
Background-color: #eaeaea;
-webkit-transform-origin:top;
-webkit-transform:rotatex (90DEG);
}
UL Li:nth-of-type (6) {
height:100px;
width:800px;
Background:url (3d3.jpeg) no-repeat;
}
#btn {
width:100px;
Background-color:black;
border-radius:5px;
margin:0 Auto;
Color:white;
font:20px/40px "Microsoft Jas Black";
Text-align:center;
Cursor:pointer;
}
</style>
<script src= "Css3.js" ></script>
<script>
/*
Achieve target effect: 1. Divide the picture into four parts, then the height of each part is 100px, add in Out
2. Adding mouse events
*/
Window.onload = function () {
var out = document.getElementById (' Out ');
Add (out);
var btn = document.getElementById (' btn ');
var box =document.getelementsbytagname (' ul ');
var angle = 0;
Btn.onclick=function () {
angle+=180;
if (angle>180) angle=0;
for (var j = 0;j<4;j++) {
SETCSS3 (box[j],{transform: "Rotatey (" +angle+ "deg)"});
}
}
}
Add a function of box
function Add (obj) {
Create an array and then add a four UL object via for;
var str = ';
for (Var i=0;i<4;i++) {
str+= ' <ul class= "box" style= "Top: ' +i*100+ ' px;transition-delay: ' +i/4+ ' s" ><li></li><li> </li><li style= "background-position:0px ' +-i*100+ ' px;" ></li><li></li><li></li><li style= "background-position:0px ' +-i*100+ ' px;" ></li></ul> ';
}
Adding a str array to obj
OBJ.INNERHTML=STR;
}
</script>
<body>
<!--to achieve image segmentation 3D rotation effect
Effect: 1. When the button is clicked, the picture is flipped, and the split-type rotation is 180 degrees.
Implementation steps: 1. Layout, layout 3D box, and put the picture on the front and back of the box, set the style of the box.
2. Keep the Unknown box style and remove the label from the body.
3. Add four boxes via JavaScript, each with the same picture in each box, and control each box to show a different position by setting the position of the background image.
4. Mouse click event, each flip angle is 180 degrees. Split the picture by changing the transition mode
-
<div class= "Out" id= "out" >
</div>
<div id= "BTN" > Replacement </div>
</body>
Can be copied directly using
CSS3 Animate 3D Conversion
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
