Pencil rotate on paper with css

3D CSS Pencil Rotate is a remarkable technique used in web design to create stunning and realistic 3D effects using CSS3. This technique is a perfect example of how CSS has evolved over the years and how it can be used to create intricate and visually stunning designs.

Before we dive into the details of 3D CSS Pencil Rotate, let’s first understand what CSS is. CSS stands for Cascading Style Sheets, and it is a language used to describe the presentation of a document written in HTML or XML. CSS provides web designers with the ability to separate the presentation of a web page from its content, making it easier to maintain and update a website. CSS is used to apply visual styles to HTML elements, including colors, fonts, layouts, and more.

CSS has come a long way since its inception in 1996. The latest version of CSS, CSS3, was released in 2011 and introduced a range of new features, including 3D transformations. These transformations allow designers to create stunning 3D effects, such as rotating and scaling elements in three dimensions, and they have become an essential part of modern web design.

The 3D CSS Pencil Rotate technique involves using CSS3 to create a realistic 3D pencil that rotates in space. This effect is achieved by using a combination of CSS properties, including transform, perspective, and animation. The transform property is used to rotate the pencil, while the perspective property is used to create a 3D perspective effect. The animation property is used to animate the rotation of the pencil, creating a smooth and fluid motion.

One of the most significant advantages of using 3D CSS Pencil Rotate is that it allows web designers to create stunning visual effects without the need for additional plugins or software. The technique is entirely web-based and can be implemented using just HTML, CSS, and JavaScript. This means that it is accessible to a wide range of web designers, regardless of their level of experience.

Another advantage of using 3D CSS Pencil Rotate is that it is lightweight and fast. Because the effect is achieved using CSS3 and JavaScript, it does not require large image files or other resource-intensive elements. This means that the effect can be loaded quickly and efficiently, improving the overall user experience of a website.

In conclusion, 3D CSS Pencil Rotate is a remarkable technique that demonstrates the power and versatility of CSS3 in web design. It allows designers to create stunning visual effects using just HTML, CSS, and JavaScript, and it is accessible to a wide range of designers regardless of their level of experience. The technique is lightweight, fast, and can be used to create a range of visually stunning 3D effects, making it an essential tool for modern web design.

html code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <div class="container">
        <div class="scene">
          <div class="paper">
            <div class="pencil">
              <div class="top">
                <div class="top-lead"></div>
              </div>
              <div class="side"></div>
              <div class="side"></div>
              <div class="side"></div>
              <div class="side"></div>
              <div class="side"></div>
              <div class="side"></div>
            </div>
          </div>
        </div>
      </div>

    

</body>
</html>

output is nothing blank page but after adding css code for style its looks like a

amazing

css code:

<style>/* learning 3D CSS. inspiration taken from this pen: https://codepen.io/FabioG/pen/YyQrWY */

        @import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
        
        :root {
          /* setup colors, left here for reference */
          --purple: hsla(257, 57%, 57%, 0.7);
          --green: hsla(202, 63%, 62%, 0.7);
          --lightblue: hsla(329, 31%, 45%, 0.7);
          --blue: hsla(240, 100%, 50%, 0.7);
          --red: hsla(0, 100%, 50%, 0.7);
          --yellow: hsla(60, 100%, 50%, 0.7);
          --orange: hsla(40, 100%, 50%, 0.7);
          --lightgreen: hsla(80, 100%, 50%, 0.7);
          --greenish: hsla(160, 100%, 50%, 0.8);
          --pink: hsla(320, 80%, 50%, 0.25);
        
          /* actual colors used */
          --pencil-yellow: hsl(43, 95%, 56%);
          --pencil-yellow2: hsl(34, 90%, 54%);
          --pencil-brown: hsl(217, 37%, 34%);
          --background-blue: hsl(205, 96%, 26%);
          --background-blue2: hsl(124, 52%, 54%);
          --paper-white: hsl(152, 63%, 59%);
        
          --animation-duration: 5s;
          --base-unit: 10; /* a base unit to control size, could break up into height and width */
        
          /* enable dat.gui javascript to control these */
          --perspective: 400;
          --paper-rotate-x: -30;
          --pencil-rotate-z: -21;
          --paper-rotate-y: 0;
          --pencil-rotate-x: 90;
          --pencil-rotate-y: 0;
          --pencil-translate-x: -25;
          --translate-z: -150;
          --pencil-translate-y: 18;
          --pencil-translate-z: -25;
          --paper-rotate-z: 0;
          --paper-width: 200;
          --paper-height: 190;
        }
        
        .container {
          height: 95vh;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        
        .scene {
          width: 400px; /* using pixels throughout, could change to vmin */
          height: 400px;
          perspective: calc(var(--perspective) * 1px);
          display: flex;
          align-items: center;
          justify-content: center;
          background: linear-gradient(var(--background-blue), var(--background-blue2));
          border-radius: 5px;
          box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.3);
        }
        
        .paper {
          position: absolute;
          width: calc(var(--paper-width) * 1px);
          height: calc(var(--paper-height) * 1px);
          top: 50%;
          border-radius: 2px;
          box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.2);
          background: linear-gradient(var(--paper-white), white);
          transform: rotateX(calc(var(--paper-rotate-x, -24) * 1deg))
            rotateY(calc(var(--paper-rotate-y, -24) * 1deg))
            rotateZ(calc(var(--paper-rotate-z) * 1deg)) rotateX(90deg);
          transform-style: preserve-3d;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        .pencil {
          position: absolute;
          transform: rotateX(calc(var(--pencil-rotate-x) * 1deg))
            translateZ(calc(var(--pencil-translate-z) * 1px))
            translateX(calc(var(--pencil-translate-x) * 1px))
            translateY(calc(var(--base-unit) * 4px))
            rotateZ(calc(var(--pencil-rotate-z) * 1deg))
            rotateY(calc(var(--pencil-rotate-y) * 1deg));
          transform-style: preserve-3d;
          width: 50px;
          height: 1px;
          left: 50px;
          top: 100px;
          transform-origin: 100% 0%;
          animation: rotate var(--animation-duration) linear infinite;
        }
        
        .top {
          position: absolute;
          width: calc(var(--base-unit) * 1px);
          height: calc(var(--base-unit) * 1.8px);
          top: calc(var(--base-unit) * 18.65px);
          transform: rotateX(90deg) translateZ(5px);
          background: var(--pencil-yellow);
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        .top:before,
        .top:after {
          content: "";
          position: absolute;
          width: calc(var(--base-unit) * 1px);
          height: calc(var(--base-unit) * 1.8px);
          background: var(--pencil-yellow);
        }
        
        .top:before {
          transform: translateZ(calc(var(--base-unit) * 0.9px)) rotateZ(60deg);
        }
        .top:after {
          transform: translateZ(calc(var(--base-unit) * 0.9px)) rotateZ(120deg);
        }
        
        .top-lead {
          position: absolute;
          width: calc(var(--base-unit) * 1px);
          height: calc(var(--base-unit) * 1px);
          background: black;
          border-radius: 50%;
          z-index: 1;
        }
        
        .side {
          position: absolute;
          width: calc(var(--base-unit) * 1px);
          height: calc(var(--base-unit) * 19.12px);
          transform-style: preserve-3d;
          background-color: var(--pencil-yellow);
        }
        
        .side:before {
          content: "";
          position: absolute;
          border-bottom: calc(var(--base-unit) * 4px) solid var(--pencil-brown);
          border-left: calc(var(--base-unit) * 0.53px) solid transparent;
          border-right: calc(var(--base-unit) * 0.53px) solid transparent;
          transform: translateZ(calc(var(--base-unit) * 0.45px)) rotateX(-13deg);
          top: calc(var(--base-unit) * -3.94px);
        }
        
        .side:after {
          content: "";
          position: absolute;
          border-bottom: calc(var(--base-unit) * 0.5px) solid black;
          border-left: calc(var(--base-unit) * 0.1px) solid transparent;
          border-right: calc(var(--base-unit) * 0.1px) solid transparent;
          transform: translateZ(calc(var(--base-unit) * 0.85px))
            translateX(calc(var(--base-unit) * 0.4px)) rotateX(-13deg);
          top: calc(var(--base-unit) * -3.94px);
        }
        
        .side:nth-child(2) {
          background: var(--pencil-yellow2);
          transform: translateZ(calc(var(--base-unit) * -0.9px));
        }
        
        .side:nth-child(3) {
          transform: translateZ(calc(var(--base-unit) * 0.9px)) rotateY(180deg);
        }
        
        .side:nth-child(4) {
          background: var(--pencil-yellow2);
          transform: translateZ(calc(var(--base-unit) * 0.44px))
            translateX(calc(var(--base-unit) * 0.75px)) rotateY(240deg);
        }
        
        .side:nth-child(5) {
          transform: translateZ(calc(var(--base-unit) * -0.44px))
            translateX(calc(var(--base-unit) * -0.75px)) rotateY(60deg);
        }
        
        .side:nth-child(6) {
          background: var(--pencil-yellow2);
          transform: translateZ(calc(var(--base-unit) * 0.44px))
            translateX(calc(var(--base-unit) * -0.75px)) rotateY(-240deg);
        }
        
        .side:nth-child(7) {
          transform: translateZ(calc(var(--base-unit) * -0.44px))
            translateX(calc(var(--base-unit) * 0.75px)) rotateY(-60deg);
        }
        
        @keyframes rotate {
          0% {
            transform: rotateX(90deg) rotateY(0deg) rotateZ(-21deg)
              translateY(calc(var(--base-unit) * 2px));
          }
          50% {
            transform: rotateX(90deg) rotateY(-179deg) rotateZ(-21deg)
              translateY(calc(var(--base-unit) * 2px));
          }
          100% {
            transform: rotateX(90deg) rotateY(-359deg) rotateZ(-21deg)
              translateY(calc(var(--base-unit) * 2px));
          }
        }
        </style>

here css code will place in a top of the head

output:

here its self it rotating continuously on that paper

learn abot Animated 3d Flipping Loading  type with html +css coding for using in web design purpose.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top