Tag: 3d

To learn how to create the Book Page Flip using CSS and jQuery follow the steps below and watch the video tutorial.

Demo:

Images used in the tutorial:

Step1.

Add HTML

<div class="recipe-book">
<div class="cookie-book">
    <div class="ongoing left sheet one"></div>
    <div class="ongoing right sheet two">Cookie Book</div>
</div>
<div class="controls">
    <button class="back"><</button>
    <button class="next">></button>
</div>
  </div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.recipe-book {
  position: relative;
  padding:10px;
  font-family: Trebuchet MS;
}

.cookie-book {
  width:500px;
  height:350px;
  position:relative;
  transform-style: preserve-3d;
  perspective:2000px;
  margin-bottom:15px;
  left:-25%;
}

Style the sheets:

.cookie-book .sheet {
  position:absolute;
  top:0;
  left:50%;
  width:50%;
  height:100%;
  transition: .7s;
  transform-style: preserve-3d;
  transform:rotateY(0deg);
  backface-visibility:hidden;
  z-index:1;
}

.cookie-book .sheet.left {
  left:0;
  transform-origin:right;
  border-radius: 5px 0 0 5px;
}

.cookie-book .sheet.right {
  left:50%;
  transform-origin:left;
  border-radius: 0 5px 5px 0;
}

.cookie-book .sheet.ongoing {
  z-index:2;
}

.cookie-book .ongoing.right.sheet.move {
  transform:rotateY(-165deg);
}
.cookie-book .ongoing.left.sheet.move {
  transform:rotateY(165deg);
}

.cookie-book .next.left.sheet {
  transform:rotateY(165deg);
}
.cookie-book .next.left.sheet.move {
  transform:rotateY(0deg);
}

.cookie-book .back.right.sheet {
  transform:rotateY(-165deg);
}

.cookie-book .back.right.sheet.move {
  transform:rotateY(0deg);
}

.cookie-book .sheet.one {
  background-color:transparent;
}

.cookie-book .sheet.two {
  background-color: #e63946;
  background-image: url(https://lenadesign.org/wp-content/uploads/2021/12/cookie.png);
  background-size: 170px;
  background-repeat: no-repeat;
  background-position: center 80%;
  font-size: 60px;
  color: #333;
  text-align: center;
}

.cookie-book .sheet.three {
  background-color:#e9c46a; 
  box-shadow: inset -1px 0 rgba(0,0,0,.1);
  text-align: center;
  font-size: 20px;
  line-height:3;
}

.cookie-book .sheet.three:before {
  content:"Ingredients:";
  position: absolute;
  width:250px;
  text-align: center;
  left:0;
  top:75px;
}

.cookie-book .sheet.three:after {
  content:"150g butter, 1/2 cup brown sugar, 1 egg, 1 tsp vanilla extract, 1 3/4 cups flour, 1/2 cup milk chocolate bits, plus 1 tbsp extra";
  position: absolute;
  top:140px;
  width:250px;
  left:0;
  text-align: center;
  line-height: normal;
  font-size:17px;
}

.cookie-book .sheet.four {
  background-color:#e9c46a;
  box-shadow: inset 1px 0 15px rgba(0,0,0,.1);
  background-image: url(https://lenadesign.org/wp-content/uploads/2021/12/bowl.png);
  background-size: 180px;
  background-repeat: no-repeat;
  background-position: center 70%;
}

.cookie-book .sheet.four:before {
  content:"Preparation:";
  width: 250px;
  text-align:center;
  position: absolute;
  font-size: 20px;
  top:60px;
}

.cookie-book .sheet.five {
  background-color:#e9c46a; 
  box-shadow: inset -1px 0 rgba(0,0,0,.1);
}

.cookie-book .sheet.five:before {
  content:"Preheat oven to 175 degrees C.";
  position: absolute;
  width:200px;
  text-align: center;
  top:70px;
  left:25px;
}

.cookie-book .sheet.five:after {
  content:"Cream together the butter, white sugar, and brown sugar until smooth. Beat in the eggs one at a time, then stir in the vanilla. Bake for about 10 minutes in the preheated oven, or until edges are nicely browned.";
  position: absolute;
  width:200px;
  text-align: center;
  top:120px;
  left:25px;
}

.cookie-book .sheet.six {
  background-color:#e9c46a;
  box-shadow: inset 1px 0 15px rgba(0,0,0,.1);
}

.cookie-book .sheet.six:before {
  content:"Enjoy!";
  font-size: 50px;
  text-align: center;
  width: 250px;
  position: absolute;
  top:40%;
}

.controls {
  text-align:center;
  width:500px;
}
.controls button {
  font-size:20px;
  margin:0 5px;
  padding:5px 20px;
  border: none;
  background-color: #d3d3d3;
  transition: .3s;
  cursor: pointer;
}

.controls button:hover {
  background-color: #b1a7a6;
  color: white;
}

Step3.

Add jQuery

To read how to add the jQuery code to HTML click here.

let sheets = [
    { name: 'one'},
    { name: 'two', id: 'Cookie Book'},
    { name: 'three', id: 'Chocolate chip cookies:'},
    { name: 'four'},
    { name: 'five' },
    { name: 'six' },
];

let ongoingSheet = 0,
changing = false;

$('.controls button').click(function(){
	change($(this).prop('class'));
});

function change(flip) {
if (changing) return;
    
if (flip != 'next' && flip != 'back') return;  
let next_sheet = (flip == 'next'),
    	switch_left_data = next_sheet ? sheets[ongoingSheet + 2] : sheets[ongoingSheet - 2],
      switch_right_data = next_sheet ? sheets[ongoingSheet + 3] : sheets[ongoingSheet - 1];
    
if (!switch_left_data && !switch_right_data) return;
    
changing = true;
let $ong_left = $('.cookie-book .ongoing.left.sheet'),
    $ong_right = $('.cookie-book .ongoing.right.sheet'),
    $switch_left = $('<div class="left sheet ' + flip + '" />'),
    $switch_right = $('<div class="right sheet ' + flip + '" />');
    
    if (switch_left_data) {
        $switch_left.addClass(switch_left_data.name);
        $switch_left.html(switch_left_data.id);
    }
    
    if (switch_right_data) {
        $switch_right.addClass(switch_right_data.name); 
        $switch_right.html(switch_right_data.id);
    }  
    
    $('.cookie-book').prepend($switch_left);
    $('.cookie-book').prepend($switch_right);
    
    $ong_left.addClass('to_remove');
    $ong_right.addClass('to_remove');
    
    setTimeout(function(){
        if (next_sheet) {
            $ong_right.addClass('move');
            $switch_left.addClass('move');
        }
        else {
            $ong_left.addClass('move');
            $switch_right.addClass('move');
        }
        
        $switch_left.addClass('ongoing');
        $switch_right.addClass('ongoing');
        
    }, 100);
    
    setTimeout(function(){
        $('.cookie-book .sheet.to_remove').remove();
        $('.cookie-book .sheet').removeClass('move next back'); 
        changing = false;        
    }, 500);
    
    ongoingSheet = next_sheet ? (ongoingSheet + 2) : (ongoingSheet - 2);
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS 2 door Wardrobe (open/ close on hover)

Pure CSS Envelope (Open/Close on click)

CSS Door Animation (Open/Close on Hover)